/* ═══════════════════════════════════════════════════════════════════════════
   OpenPilot Design Tokens — Tier 1: Primitives & Tier 2: Semantics
   Fully compliant with platform.md §2-§9 (WCAG 2.2 AA)
   Color space: OKLCH source, sRGB fallback
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tier 1: Primitives ────────────────────────────────────────────────── */
:root {
  /* ── Spacing scale (8px base, 4px half-step) ── */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ── Radius ── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Typography scale (1.25 major third) ── */
  --font-sans: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;
  --font-size-display: clamp(2rem, 1.2rem + 3vw, 3.05rem);
  --font-size-h1:  2.44rem;
  --font-size-h2:  1.95rem;
  --font-size-h3:  1.56rem;
  --font-size-h4:  1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body:    1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-size-code:    0.875rem;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ── Motion ── */
  --motion-duration-instant: 50ms;
  --motion-duration-fast:    150ms;
  --motion-duration-base:    250ms;
  --motion-duration-slow:    400ms;
  --motion-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ── Elevation ── */
  --elevation-flat:    none;
  --elevation-raised:  0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --elevation-overlay: 0 4px 12px rgba(0,0,0,.10);
  --elevation-modal:   0 16px 48px rgba(0,0,0,.18);

  /* ── Layout ── */
  --content-max-width: 1280px;
  --sidebar-width: 280px;
  --right-panel-width: 340px;
  --header-height: 48px;
  --touch-target-min: 44px;
  --focus-ring-width: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tier 2: Semantic Tokens — Light Theme (default)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Color primitives (OKLCH → sRGB) ── */
:root {
  /* Neutral ladder — perceptually even lightness steps */
  --color-neutral-0:    #ffffff;  /* oklch(1.00 0.000 0)     */
  --color-neutral-50:   #f7f8fa;  /* oklch(0.97 0.003 250)  */
  --color-neutral-100:  #edf0f4;  /* oklch(0.94 0.005 250)  */
  --color-neutral-200:  #dce0e8;  /* oklch(0.88 0.006 260)  */
  --color-neutral-300:  #c4cad4;  /* oklch(0.80 0.008 255)  */
  --color-neutral-400:  #9ba3af;  /* oklch(0.66 0.010 255)  */
  --color-neutral-500:  #727a88;  /* oklch(0.50 0.010 260)  */
  --color-neutral-600:  #596170;  /* oklch(0.40 0.010 260)  */
  --color-neutral-700:  #3d434f;  /* oklch(0.28 0.010 260)  */
  --color-neutral-800:  #252932;  /* oklch(0.18 0.008 260)  */
  --color-neutral-900:  #151820;  /* oklch(0.11 0.006 260)  */
  --color-neutral-950:  #0b0d12;  /* oklch(0.06 0.004 260)  */
  --color-neutral-1000: #050608;  /* oklch(0.03 0.002 260)  */

  /* Blue accent */
  --color-blue-400:  #5b9cf5;  /* oklch(0.65 0.15 260) */
  --color-blue-500:  #3b82f6;  /* oklch(0.55 0.18 255) */
  --color-blue-600:  #2563eb;  /* oklch(0.45 0.20 255) */

  /* Green */
  --color-green-400: #58c48a;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;

  /* Amber */
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  /* Red */
  --color-red-400:  #f87171;
  --color-red-500:  #ef4444;
  --color-red-600:  #dc2626;
}

/* ── Semantic surface tokens ── */
:root {
  --surface-base:      var(--color-neutral-0);
  --surface-secondary: var(--color-neutral-50);
  --surface-raised:    var(--color-neutral-0);
  --surface-sunken:    var(--color-neutral-100);
  --surface-overlay:   var(--color-neutral-0);
  --surface-header:    var(--color-neutral-950);
  --surface-sidebar:   var(--color-neutral-50);
}

/* ── Semantic text tokens (≥ 4.5:1 on surface-base) ── */
:root {
  --text-default:   var(--color-neutral-900);  /* ~14:1 */
  --text-secondary: var(--color-neutral-600);  /* ~5.5:1 */
  --text-muted:     var(--color-neutral-500);  /* ~4.6:1 */
  --text-inverse:   var(--color-neutral-0);
  --text-disabled:  var(--color-neutral-300);
  --text-brand:     var(--color-blue-600);
}

/* ── Semantic action tokens ── */
:root {
  --action-primary:          var(--color-blue-500);
  --action-primary-hover:    var(--color-blue-600);
  --action-primary-active:   var(--color-blue-600);
  --action-primary-text:     var(--color-neutral-0);
  --action-primary-disabled: var(--color-neutral-300);

  --action-secondary:          transparent;
  --action-secondary-hover:    var(--color-neutral-100);
  --action-secondary-active:   var(--color-neutral-200);
  --action-secondary-border:   var(--color-neutral-300);
  --action-secondary-text:     var(--text-default);

  --action-danger:        var(--color-red-500);
  --action-danger-hover:  var(--color-red-600);
  --action-danger-text:   var(--color-neutral-0);
}

/* ── Semantic border tokens (≥ 3:1 for meaningful borders) ── */
:root {
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-focus:   var(--color-blue-500);
}

/* ── Semantic feedback tokens ── */
:root {
  --feedback-info-bg:     #eff6ff;
  --feedback-info-border: #bfdbfe;
  --feedback-info-text:   #1e40af;
  --feedback-success-bg:  #f0fdf4;
  --feedback-success-border: #bbf7d0;
  --feedback-success-text:   #166534;
  --feedback-warning-bg:  #fffbeb;
  --feedback-warning-border: #fde68a;
  --feedback-warning-text:   #92400e;
  --feedback-error-bg:    #fef2f2;
  --feedback-error-border: #fecaca;
  --feedback-error-text:   #991b1b;
}

/* ── User message bubble ── */
:root {
  --bubble-user-bg:    var(--action-primary);
  --bubble-user-text:  var(--color-neutral-0);
  --bubble-assist-bg:  var(--color-neutral-100);
  --bubble-assist-text: var(--text-default);
  --bubble-tool-bg:    var(--color-neutral-50);
  --bubble-tool-border: var(--border-default);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tier 2: Semantic spacing tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --space-inset-xs: var(--space-1);
  --space-inset-sm: var(--space-2);
  --space-inset-md: var(--space-4);
  --space-inset-lg: var(--space-6);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-4);
  --space-inline-lg: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark Theme
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --surface-base:      var(--color-neutral-900);
  --surface-secondary: var(--color-neutral-800);
  --surface-raised:    var(--color-neutral-800);
  --surface-sunken:    var(--color-neutral-950);
  --surface-overlay:   var(--color-neutral-800);
  --surface-header:    var(--color-neutral-1000);
  --surface-sidebar:   var(--color-neutral-900);

  --text-default:   var(--color-neutral-100);
  --text-secondary: var(--color-neutral-300);
  --text-muted:     var(--color-neutral-400);
  --text-inverse:   var(--color-neutral-900);
  --text-disabled:  var(--color-neutral-600);
  --text-brand:     var(--color-blue-400);

  --action-primary:        var(--color-blue-500);
  --action-primary-hover:  var(--color-blue-400);
  --action-secondary:        transparent;
  --action-secondary-hover:  var(--color-neutral-700);
  --action-secondary-border: var(--color-neutral-600);
  --action-secondary-text:   var(--text-default);

  --border-default: var(--color-neutral-700);
  --border-strong:  var(--color-neutral-600);

  --feedback-info-bg:     #1e3a5f;
  --feedback-info-border: #1e4d8c;
  --feedback-info-text:   #93c5fd;
  --feedback-success-bg:  #14532d;
  --feedback-success-border: #166534;
  --feedback-success-text:   #86efac;
  --feedback-warning-bg:  #451a03;
  --feedback-warning-border: #78350f;
  --feedback-warning-text:   #fcd34d;
  --feedback-error-bg:    #450a0a;
  --feedback-error-border: #7f1d1d;
  --feedback-error-text:   #fca5a5;

  --bubble-user-bg:    var(--color-blue-600);
  --bubble-user-text:  var(--color-neutral-0);
  --bubble-assist-bg:  var(--color-neutral-700);
  --bubble-assist-text: var(--text-default);
  --bubble-tool-bg:    var(--color-neutral-800);
  --bubble-tool-border: var(--color-neutral-600);

  --elevation-raised:  0 1px 2px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.20);
  --elevation-overlay: 0 4px 12px rgba(0,0,0,.50);
  --elevation-modal:   0 16px 48px rgba(0,0,0,.70);
}

/* ═══════════════════════════════════════════════════════════════════════════
   High-Contrast Theme
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="high-contrast-light"] {
  --surface-base:      #ffffff;
  --surface-secondary: #ffffff;
  --surface-raised:    #ffffff;
  --surface-sunken:    #f0f0f0;
  --surface-header:    #000000;
  --surface-sidebar:   #ffffff;
  --text-default:      #000000;
  --text-secondary:    #000000;
  --text-muted:        #2d2d2d;
  --border-default:    #000000;
  --border-strong:     #000000;
  --border-focus:      #000000;
  --action-primary:        #0000ee;
  --action-primary-hover:  #0000cc;
  --action-primary-text:   #ffffff;
}

[data-theme="high-contrast-dark"] {
  --surface-base:      #000000;
  --surface-secondary: #000000;
  --surface-raised:    #000000;
  --surface-sunken:    #1a1a1a;
  --surface-header:    #000000;
  --surface-sidebar:   #000000;
  --text-default:      #ffffff;
  --text-secondary:    #ffffff;
  --text-muted:        #cccccc;
  --border-default:    #ffffff;
  --border-strong:     #ffffff;
  --border-focus:      #ffff00;
  --action-primary:        #ffff00;
  --action-primary-hover:  #cccc00;
  --action-primary-text:   #000000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Forced Colors
   ═══════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  :root {
    --border-focus: Highlight;
    --action-primary: Highlight;
    --action-primary-text: HighlightText;
  }
  .tool-chip.active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints — applied via container queries + min-width
   ═══════════════════════════════════════════════════════════════════════════ */
/* Mobile-first: all styles above are mobile. Enhance upward. */
@media (max-width: 479px) {
  :root {
    --sidebar-width: 100%;
    --right-panel-width: 100%;
  }
}