/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Task 287
   Tiered token system: reference → semantic → component-friendly aliases.
   Loaded BEFORE primitives.css and style.css (see index.html).
   Single source of truth for colour, spacing, typography, radius,
   elevation, motion, and z-index.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. Reference tokens (raw scales — internal only) ─────────── */
  --slate-50:  #f9fafb;
  --slate-100: #f3f4f6;
  --slate-200: #e5e7eb;
  --slate-300: #d1d5db;
  --slate-400: #9ca3af;
  --slate-500: #6b7280;
  --slate-600: #4b5563;
  --slate-700: #374151;
  --slate-800: #1f2937;
  --slate-900: #111827;
  --slate-950: #0a0a0a;

  --blue-100:  #dbeafe;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;
  --blue-600:  #2563eb;
  --blue-700:  #1d4ed8;
  --blue-900:  #1e3a8a;

  --red-100:   #fee2e2;
  --red-500:   #ef4444;
  --red-600:   #dc2626;
  --red-900:   #451a1a;

  --violet-400: #a78bfa;
  --violet-600: #7c3aed;

  --green-100: #d1fae5;
  --green-500: #10b981;
  --green-900: #064e3b;

  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-900: #451a03;

  /* ── 2. Semantic tokens (component-facing) ────────────────────── */
  --bg-app:        var(--slate-50);
  --bg-sidebar:    var(--slate-50);

  /* Email reading surface (Task 475, design-system §2.10): INVARIANT across
     themes — email HTML assumes a light canvas (inline color:#000 /
     background:#fff), so the reading card stays light in dark mode. These
     two tokens are deliberately absent from BOTH dark blocks below; the
     invariance is negative-pinned (ETC-475-05). */
  --email-surface: #ffffff;
  --email-ink:     var(--slate-900);
  --bg-card:       #ffffff;
  /* Card surface with a whisper of blue — highlighted/primary cards only. */
  --bg-card-accent: #fafbfd;
  --bg-subtle:     var(--slate-50);
  --bg-hover:      var(--slate-100);
  --bg-active:     var(--slate-200);
  --bg-primary:    #ffffff;

  --border:        var(--slate-200);
  --border-focus:  var(--blue-600);
  --border-subtle: var(--slate-100);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-tertiary:  var(--slate-400);

  --accent-primary: var(--slate-900);
  --accent-text:    #ffffff;
  --accent-blue:    var(--blue-600);
  --accent-blue-bg: var(--blue-100);
  --accent-red:     var(--red-500);
  --accent-red-bg:  var(--red-100);
  --accent-green:   var(--green-500);
  --accent-green-bg: var(--green-100);
  --accent-amber:   var(--amber-500);
  --accent-amber-bg: var(--amber-100);
  --accent-violet:  var(--violet-600);

  /* Step-type icon circle backgrounds (workflow rail) */
  --step-bg-meeting:  #ede9fe;
  --step-bg-action:   #dbeafe;
  --step-bg-proposal: #fef3c7;
  --step-bg-document: #d1fae5;
  --step-bg-email:    #cffafe;

  /* ── 3. Spacing scale (4px grid) ──────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* ── 4. Typography ────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;

  /* Content-chrome header rows — single standard shared by the client
     identity rows (.client-header-*) and step header rows (.content-header-*). */
  --header-row-1-size: 0.9rem;
  --header-row-2-size: 0.78rem;
  --header-row-3-size: 0.72rem;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;

  --line-height-tight:  1.2;
  --line-height-normal: 1.45;
  --line-height-loose:  1.6;

  /* ── 5. Radius ────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── 6. Elevation ─────────────────────────────────────────────── */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);

  /* Shadow aliases (legacy names mapped to elevation tiers) */
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);

  /* Bezel — top-lit hairline for raised tiles (lighting constants, like
     elevation: physically white/black in both themes, intensity theme-tuned). */
  --bezel-highlight: rgba(255, 255, 255, 0.70);
  --bezel-shadow: rgba(0, 0, 0, 0.10);

  /* ── 7. Motion ────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 8. Z-index ───────────────────────────────────────────────── */
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-modal:    1200;
  /* Depth=2 nested-modal tier (e.g. discard-confirm over prompt editor).
     Must stay between --z-modal (1200) and --z-popover (1300). */
  --z-modal-stacked: 1250;
  --z-popover:  1300;
  --z-toast:    1400;
  --z-tooltip:  1500;

  /* ── 9. Layout dimensions ─────────────────────────────────────── */
  --sidebar-width:  300px;
  --header-height:  60px;
  --app-nav-width:  56px;   /* Task 483 — far-left app-view switcher rail */

  /* ── 10. Breakpoints (TD-T169-005 — centralised) ──────────────── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   Two activation paths share the same token values:
   - Explicit user pref:  html[data-theme="dark"]
   - OS preference:       @media (prefers-color-scheme: dark) :root:not([data-theme])
   Both selectors use the same declaration block — the comma in the
   selector list keeps the values single-sourced (no duplication).
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-app:        var(--slate-950);
    --bg-sidebar:    #111111;
    --bg-card:       #171717;
    --bg-card-accent: #15171e;
    --bg-subtle:     #202020;
    --bg-hover:      #262626;
    --bg-active:     #333333;
    --bg-primary:    #171717;
    --border:        #333333;
    --text-primary:   #ededed;
    --text-secondary: #a1a1a1;
    --text-tertiary:  #666666;
    --accent-primary: #ffffff;
    --accent-text:    #000000;
    --accent-blue-bg: var(--blue-900);
    --accent-red-bg:  var(--red-900);
    --accent-green-bg: var(--green-900);
    --accent-amber:   var(--amber-400);
    --accent-amber-bg: var(--amber-900);
    --accent-violet:  var(--violet-400);
    --step-bg-meeting:  rgba(139, 92, 246, 0.22);
    --step-bg-action:   rgba(59, 130, 246, 0.22);
    --step-bg-proposal: rgba(251, 191, 36, 0.18);
    --step-bg-document: rgba(52, 211, 153, 0.18);
    --step-bg-email:    rgba(34, 211, 238, 0.18);
    --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
    --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.40);
    --bezel-highlight: rgba(255, 255, 255, 0.16);
    --bezel-shadow: rgba(0, 0, 0, 0.28);
    --border-subtle: #2a2a2a;
  }
}

/* Explicit user preference. Mirrors the OS-preference block above so a
   future token edit must touch both — keep them in sync (or refactor to
   a CSS layer when build tooling is introduced). */
html[data-theme="dark"] {
  --bg-app:        var(--slate-950);
  --bg-sidebar:    #111111;
  --bg-card:       #171717;
  --bg-card-accent: #15171e;
  --bg-subtle:     #202020;
  --bg-hover:      #262626;
  --bg-active:     #333333;
  --bg-primary:    #171717;
  --border:        #333333;
  --text-primary:   #ededed;
  --text-secondary: #a1a1a1;
  --text-tertiary:  #666666;
  --accent-primary: #ffffff;
  --accent-text:    #000000;
  --accent-blue-bg: var(--blue-900);
  --accent-red-bg:  var(--red-900);
  --accent-green-bg: var(--green-900);
  --accent-amber:   var(--amber-400);
  --accent-amber-bg: var(--amber-900);
  --accent-violet:  var(--violet-400);
  --step-bg-meeting:  rgba(139, 92, 246, 0.22);
  --step-bg-action:   rgba(59, 130, 246, 0.22);
  --step-bg-proposal: rgba(251, 191, 36, 0.18);
  --step-bg-document: rgba(52, 211, 153, 0.18);
  --step-bg-email:    rgba(34, 211, 238, 0.18);
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.40);
  --bezel-highlight: rgba(255, 255, 255, 0.16);
  --bezel-shadow: rgba(0, 0, 0, 0.28);
  --border-subtle: #2a2a2a;
}