/* ==========================================================================
   CherryAI EAM Design Tokens v3.0 — CherryAI Brand Theme
   
   Single source of truth for all design primitives.
   DO NOT add new colors outside this file.
   
   Architecture: :root = LIGHT defaults, html.dark = DARK overrides
   Brand: CherryAI — Primary Red #cf3339, Navy #081e3a
   ADR-010: No hard-coded hex outside tokens.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     BRAND COLORS — CherryAI Palette (same in both modes)
     Primary: Brand Red #cf3339
     Secondary: Brand Navy #081e3a
     ========================================================================== */
  --color-brand-900: #051424;
  --color-brand-800: #081e3a;
  --color-brand-700: #0f2d52;
  --color-brand-600: #1a3a5c;
  --color-brand-550: #244a6e;
  --color-brand-500: #cf3339;
  --color-brand-450: #b82d32;
  --color-brand-200: #fce8e8;
  --color-brand-100: #fef2f2;

  --color-accent: #cf3339;
  --color-accent-hover: #b82d32;
  --color-accent-light: #e26e66;
  --color-accent-soft: rgba(207, 51, 57, 0.1);
  --color-accent-glow: rgba(207, 51, 57, 0.2);
  
  /* ==========================================================================
     SURFACE COLORS (Light Mode)
     ========================================================================== */
  --color-surface-0: #f8fafc;
  --color-surface-1: #ffffff;
  --color-surface-2: #fafbfd;
  --color-surface-3: #f1f5f9;
  
  /* ==========================================================================
     BORDER COLORS (Light Mode)
     ========================================================================== */
  --color-border-1: #e2e8f0;
  --color-border-2: #cbd5e1;
  --color-border-3: #f1f5f9;
  
  /* ==========================================================================
     TEXT COLORS (Light Mode)
     ========================================================================== */
  --color-text-1: #0f172a;
  --color-text-2: #475569;
  --color-text-3: #64748b;
  --color-text-4: #94a3b8;
  --color-text-inverse: #f8fafc;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --color-text-inverse-subtle: rgba(255, 255, 255, 0.5);
  --color-text-inverse-faint: rgba(255, 255, 255, 0.4);
  
  /* ==========================================================================
     SEMANTIC COLORS - SUCCESS
     ========================================================================== */
  --color-success-700: #166534;
  --color-success-600: #22c55e;
  --color-success-500: #10b981;
  --color-success-400: #34d399;
  --color-success-100: #dcfce7;
  --color-success-50: #f0fdf4;
  
  /* ==========================================================================
     SEMANTIC COLORS - WARNING
     ========================================================================== */
  --color-warning-700: #92400e;
  --color-warning-600: #f59e0b;
  --color-warning-500: #fbbf24;
  --color-warning-100: #fef3c7;
  --color-warning-50: #fefce8;
  
  /* ==========================================================================
     SEMANTIC COLORS - DANGER
     ========================================================================== */
  --color-danger-700: #991b1b;
  --color-danger-600: #ef4444;
  --color-danger-500: #f87171;
  --color-danger-100: #fee2e2;
  --color-danger-50: #fef2f2;
  
  /* ==========================================================================
     SEMANTIC COLORS - INFO
     ========================================================================== */
  --color-info-700: #1d4ed8;
  --color-info-600: #3b82f6;
  --color-info-500: #60a5fa;
  --color-info-100: #dbeafe;
  --color-info-50: #eff6ff;
  
  /* ==========================================================================
     FOCUS & DISABLED STATES
     ========================================================================== */
  --color-focus: #cf3339;
  --color-focus-ring: rgba(207, 51, 57, 0.2);
  --color-focus-ring-strong: rgba(207, 51, 57, 0.15);
  --color-disabled-bg: #f1f5f9;
  --color-disabled-text: #94a3b8;
  --color-disabled-border: #e2e8f0;
  
  /* ==========================================================================
     OVERLAYS
     ========================================================================== */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-light-hover: rgba(255, 255, 255, 0.15);
  
  /* ==========================================================================
     SEMANTIC LAYER — Light Mode Defaults
     These are the PRIMARY variables used by components.
     ========================================================================== */
  --surface-app: #f8fafc;
  --surface-primary: #ffffff;
  --surface-secondary: #f1f5f9;
  --surface-tertiary: #e2e8f0;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #f8fafc;
  --text-on-brand: #ffffff;

  --border-primary: rgba(0, 0, 0, 0.12);
  --border-secondary: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.2);

  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(207, 51, 57, 0.15);
  --shadow-hero: 0 4px 20px rgba(0, 0, 0, 0.08);

  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.15);
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --input-focus-ring: rgba(207, 51, 57, 0.25);

  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --card-hover-border: rgba(0, 0, 0, 0.15);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);

  --table-header-bg: #f8fafc;
  --table-header-text: #475569;
  --table-row-hover: rgba(0, 0, 0, 0.03);
  --table-border: rgba(0, 0, 0, 0.06);
  --table-zebra: rgba(0, 0, 0, 0.02);

  --btn-primary-bg: #cf3339;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #b82d32;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: rgba(0, 0, 0, 0.15);
  --btn-secondary-text: #475569;
  --btn-secondary-hover-bg: rgba(0, 0, 0, 0.05);

  --sidebar-bg: #081e3a;
  --sidebar-text: #cbd5e1;
  --sidebar-active-bg: rgba(207, 51, 57, 0.15);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms ease-out;

  /* ==========================================================================
     TYPOGRAPHY SCALE
     ========================================================================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-42: 2.625rem;
  
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  
  --line-height-tight: 1.1;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* ==========================================================================
     SPACING SCALE
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.625rem;
  --space-5: 0.75rem;
  --space-6: 0.875rem;
  --space-7: 1rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;
  --space-10: 1.75rem;
  --space-11: 2rem;
  --space-12: 2.5rem;
  --space-13: 3rem;
  --space-14: 4rem;
  
  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  
  /* ==========================================================================
     FOCUS RINGS
     ========================================================================== */
  --ring-focus: 0 0 0 3px var(--color-focus-ring);
  --ring-focus-visible: 0 0 0 4px var(--color-focus-ring-strong);
  
  /* ==========================================================================
     MOTION / TRANSITIONS
     ========================================================================== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-normal: 0.25s;
  --dur-slow: 0.3s;
  
  /* ==========================================================================
     GRADIENTS — CherryAI Brand
     ========================================================================== */
  --gradient-brand: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  --gradient-hero: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-700) 100%);
  --gradient-header: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-900) 100%);
  --gradient-sidebar: linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 100%);
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
html.dark {
  --color-surface-0: #0a0f1a;
  --color-surface-1: #111827;
  --color-surface-2: #1a2234;
  --color-surface-3: #1e293b;
  --color-border-1: rgba(255, 255, 255, 0.1);
  --color-border-2: rgba(255, 255, 255, 0.12);
  --color-border-3: rgba(255, 255, 255, 0.06);
  --color-text-1: #f1f5f9;
  --color-text-2: #cbd5e1;
  --color-text-3: #8896ab;
  --color-text-4: #94a3b8;

  --surface-app: #0a0f1a;
  --surface-primary: #111827;
  --surface-secondary: #1e293b;
  --surface-tertiary: #334155;
  --surface-elevated: #1a2332;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --input-bg: #1a2332;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-text: #f1f5f9;
  --input-placeholder: #64748b;

  --card-bg: #111827;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-hover-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);

  --table-header-bg: #1e293b;
  --table-header-text: #cbd5e1;
  --table-row-hover: rgba(255, 255, 255, 0.03);
  --table-border: rgba(255, 255, 255, 0.06);
  --table-zebra: rgba(255, 255, 255, 0.02);

  --btn-secondary-border: rgba(255, 255, 255, 0.15);
  --btn-secondary-text: #cbd5e1;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.05);

  --color-disabled-bg: #1e293b;
  --color-disabled-text: #64748b;
  --color-disabled-border: rgba(255, 255, 255, 0.1);
}