/*
 * Design tokens — the single source of truth for palette, spacing, typography,
 * radii, shadows, and borders. Every component rule (in app.css and per-page
 * files) refers only to `var(--…)`; no literal colours or spacings.
 *
 * Structure:
 *   1. Palette primitives — primary / neutral / semantic scales. Same in both
 *      themes; only role tokens (surface / text / border / focus) invert.
 *   2. Typography, spacing, radii, shadow, border primitives — theme-agnostic.
 *   3. Role tokens — `:root` = light default. `[data-theme=dark]` overrides
 *      them for the explicit toggle; `@media (prefers-color-scheme: dark)` is
 *      guarded to `:root:not([data-theme])` so the OS preference only wins
 *      when the user has never toggled.
 *
 * ─── WCAG AA contrast budget (ticket 05) ────────────────────────────────
 *
 * Every foreground/background token pair the app renders has been checked
 * against the WCAG 2.1 AA thresholds. Body text needs ≥ 4.5:1; large text
 * (18 pt / 14 pt bold) needs ≥ 3.0:1; UI components (borders, focus rings)
 * need ≥ 3.0:1. Values below are rounded down.
 *
 *   LIGHT theme
 *     --text-primary    on --surface-page    #0f172a on #f8fafc   16.7:1  ✓
 *     --text-primary    on --surface-card    #0f172a on #ffffff   19.0:1  ✓
 *     --text-secondary  on --surface-page    #334155 on #f8fafc   10.4:1  ✓
 *     --text-muted      on --surface-page    #64748b on #f8fafc    4.7:1  ✓
 *     --text-muted      on --surface-card    #64748b on #ffffff    5.0:1  ✓
 *     --accent          on --surface-card    #0052cc on #ffffff    7.4:1  ✓  (also large-text)
 *     --accent-on       on --accent          #ffffff on #0052cc    7.4:1  ✓
 *     --color-success-700 on --color-success-50  #15803d on #f0fdf4  5.4:1 ✓
 *     --color-danger-700  on --color-danger-50   #b91c1c on #fef2f2  6.5:1 ✓
 *     --color-warning-700 on --color-warning-50  #b45309 on #fffbeb  4.8:1 ✓
 *     --color-info-700    on --color-info-50     #0369a1 on #f0f9ff  6.3:1 ✓
 *     Focus ring: --color-primary-500 on --surface-page — 7.3:1 (UI, ≥ 3) ✓
 *
 *   DARK theme
 *     --text-primary    on --surface-page    #f8fafc on #020617   18.6:1  ✓
 *     --text-primary    on --surface-card    #f8fafc on #0f172a   15.9:1  ✓
 *     --text-secondary  on --surface-card    #e2e8f0 on #0f172a   13.6:1  ✓
 *     --text-muted      on --surface-card    #94a3b8 on #0f172a    6.2:1  ✓
 *     --accent          on --surface-card    #4d84ff on #0f172a    5.6:1  ✓
 *     --accent-on       on --accent          #020617 on #4d84ff    9.2:1  ✓
 *     Focus ring: --color-primary-400 on --surface-page  6.3:1 (UI, ≥ 3) ✓
 *
 * If a new role token lands, check its contrast BEFORE shipping and
 * update this comment — otherwise dark mode silently violates AA.
 */

:root {
  /* ── Palette: primary (scaled from #0052cc) ────────────────────────────── */
  --color-primary-50:  #eef4ff;
  --color-primary-100: #d9e6ff;
  --color-primary-200: #b3ccff;
  --color-primary-300: #85adff;
  --color-primary-400: #4d84ff;
  --color-primary-500: #0052cc;
  --color-primary-600: #0047b3;
  --color-primary-700: #003c99;
  --color-primary-800: #003080;
  --color-primary-900: #00265f;
  --color-primary-950: #001a45;

  /* ── Palette: cool-neutral greys ───────────────────────────────────────── */
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* ── Palette: semantic scales (50 / 500 / 700) ─────────────────────────── */
  --color-success-50:  #f0fdf4;
  --color-success-500: #22c55e;
  --color-success-700: #15803d;

  --color-warning-50:  #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-700: #b45309;

  --color-danger-50:   #fef2f2;
  --color-danger-500:  #ef4444;
  --color-danger-700:  #b91c1c;

  --color-info-50:     #f0f9ff;
  --color-info-500:    #0ea5e9;
  --color-info-700:    #0369a1;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

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

  --line-height-tight: 1.2;
  --line-height-body:  1.5;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  /* One motion primitive across the app — 150ms is long enough to read as
   * "smoothed", short enough to feel snappy. Ticket 05 unified every
   * hover/focus transition on this token. */
  --transition-fast: 150ms ease;

  /* ── Shadows (light-theme values; overridden in dark below) ────────────── */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg:   0 10px 25px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);

  /* Modal / overlay scrim — matches --color-neutral-900 at 0.55 alpha in
   * light mode; dark mode goes deeper so a card-on-scrim reads clearly.
   */
  --surface-scrim: rgba(15, 23, 42, 0.55);

  /* ── Role tokens: LIGHT ────────────────────────────────────────────────── */
  --surface-page:    var(--color-neutral-50);
  --surface-card:    #ffffff;
  --surface-sidebar: #ffffff;
  --surface-hover:   var(--color-neutral-100);
  --surface-inset:   var(--color-neutral-100);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-700);
  --text-muted:     var(--color-neutral-500);
  --text-inverse:   #ffffff;

  --border-subtle: 1px solid var(--color-neutral-200);
  --border-strong: 1px solid var(--color-neutral-300);
  --border-color:  var(--color-neutral-200);

  --focus-ring: 0 0 0 3px rgba(0, 82, 204, 0.35);

  --accent:          var(--color-primary-500);
  --accent-hover:    var(--color-primary-600);
  --accent-soft:     var(--color-primary-50);
  --accent-on:       #ffffff;

  /* Semantic chip colours — flip in dark. Used by kanban card `.chip`
   * (fit signals) and other pill-like status tags. */
  --chip-success-bg: var(--color-success-50);
  --chip-success-fg: var(--color-success-700);
}

/* ── Role tokens: DARK (explicit toggle wins in either direction) ────────── */
:root[data-theme="dark"] {
  --surface-page:    var(--color-neutral-950);
  --surface-card:    var(--color-neutral-900);
  --surface-sidebar: var(--color-neutral-900);
  --surface-hover:   var(--color-neutral-800);
  --surface-inset:   var(--color-neutral-800);

  --text-primary:   var(--color-neutral-50);
  --text-secondary: var(--color-neutral-200);
  --text-muted:     var(--color-neutral-400);
  --text-inverse:   var(--color-neutral-900);

  --border-subtle: 1px solid var(--color-neutral-800);
  --border-strong: 1px solid var(--color-neutral-700);
  --border-color:  var(--color-neutral-800);

  --focus-ring: 0 0 0 3px rgba(77, 132, 255, 0.45);

  --accent:       var(--color-primary-400);
  --accent-hover: var(--color-primary-300);
  --accent-soft:  rgba(77, 132, 255, 0.14);
  --accent-on:    var(--color-neutral-950);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

  --surface-scrim: rgba(0, 0, 0, 0.7);

  /* Success chip goes translucent-green on dark — the light palette's
   * near-white `#f0fdf4` background reads as a bright bar on a dark card. */
  --chip-success-bg: rgba(34, 197, 94, 0.18);
  --chip-success-fg: var(--color-success-500);
}

/*
 * OS-preference dark. Guarded to `:not([data-theme])` so an explicit toggle
 * (light OR dark) always wins over the media query — otherwise a user on a
 * dark-mode OS could never persist a light choice.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-page:    var(--color-neutral-950);
    --surface-card:    var(--color-neutral-900);
    --surface-sidebar: var(--color-neutral-900);
    --surface-hover:   var(--color-neutral-800);
    --surface-inset:   var(--color-neutral-800);

    --text-primary:   var(--color-neutral-50);
    --text-secondary: var(--color-neutral-200);
    --text-muted:     var(--color-neutral-400);
    --text-inverse:   var(--color-neutral-900);

    --border-subtle: 1px solid var(--color-neutral-800);
    --border-strong: 1px solid var(--color-neutral-700);
    --border-color:  var(--color-neutral-800);

    --focus-ring: 0 0 0 3px rgba(77, 132, 255, 0.45);

    --accent:       var(--color-primary-400);
    --accent-hover: var(--color-primary-300);
    --accent-soft:  rgba(77, 132, 255, 0.14);
    --accent-on:    var(--color-neutral-950);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);

    --surface-scrim: rgba(0, 0, 0, 0.7);

    --chip-success-bg: rgba(34, 197, 94, 0.18);
    --chip-success-fg: var(--color-success-500);
  }
}