/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — design tokens (CSS custom properties) for both themes
   ═══════════════════════════════════════════════════════════════════════
   Single source of truth for color, spacing, typography, radius, shadow
   and motion. Other CSS files MUST consume only these variables.

   Mirrored verbatim in static/js/tokens.js (DARK_TOKENS / LIGHT_TOKENS)
   so that resolveToken(theme, name) can answer without touching the DOM.
   When you add or change a token here, also update tokens.js.

   Validates: Requirements 11.1, 11.7, 11.8
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Dark theme (default) ─────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  /* Brand */
  --brand-1: #7c3aed;        /* violet */
  --brand-2: #06b6d4;        /* cyan */
  --brand-3: #ec4899;        /* pink accent */
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --brand-grad-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));

  /* Surface */
  --bg-0: #07070d;
  --bg-1: #0e0e16;
  --bg-2: #15151f;
  --bg-3: #1d1d2a;
  --bg-4: #262635;

  /* Glass panels */
  --glass-bg: rgba(20, 20, 30, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5);

  /* Text */
  --text-1: #f5f6fa;
  --text-2: #a8aac1;
  --text-3: #6f7191;
  --text-4: #4a4d6b;
  --text-on-accent: #ffffff;

  /* Semantic */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Sizing */
  --sidebar-w: 280px;
  --rail-w: 360px;
  --topbar-h: 64px;
  --composer-h: 88px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 32px rgba(124, 58, 237, 0.25);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --dur-theme: 200ms;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 17px;
  --font-size-lg: 22px;
  --font-size-xl: 32px;
  --line-height-tight: 1.25;
  --line-height-base: 1.55;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-boot: 1000;
}

/* ─── Light theme overrides ────────────────────────────────────────────── */
:root[data-theme="light"] {
  /* Surface */
  --bg-0: #fafbff;
  --bg-1: #ffffff;
  --bg-2: #f4f5fa;
  --bg-3: #ebedf5;
  --bg-4: #dfe2ee;

  /* Glass panels */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.12);

  /* Text — adjusted for AA contrast on light backgrounds */
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #475569;
  --text-4: #94a3b8;
  --text-on-accent: #ffffff;

  /* Borders */
  --border-subtle: rgba(15, 23, 42, 0.05);
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.15);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-glow: 0 0 32px rgba(124, 58, 237, 0.18);
}