/* ============================================================================
   IceBox Design Tokens — 3-tier (primitive → semantic → theme)
   Light is the default on :root; dark under :root[data-theme="dark"].
   Per-module theme-*.css remaps --brand-* and --font-* only.
   ============================================================================ */

:root {
  /* ---- Primitive: neutral ramp ---- */
  --n-0:#ffffff; --n-25:#fbfcfe; --n-50:#f6f8fb; --n-100:#eef1f6; --n-150:#e4e9f0;
  --n-200:#d8dee8; --n-300:#bcc5d3; --n-400:#94a0b3; --n-500:#6b7890;
  --n-600:#4e5a70; --n-700:#3a4354; --n-800:#262c39; --n-900:#171b24; --n-950:#0e1117;

  /* ---- Primitive: semantic hues (accessible on light + dark) ---- */
  --green-500:#16a34a; --green-600:#15803d; --green-50:#e8f6ee;
  --amber-500:#f59e0b; --amber-600:#d97706; --amber-50:#fdf2dd;
  --red-500:#e23b4e;   --red-600:#c62f41;   --red-50:#fcecee;
  --blue-500:#2563eb;  --blue-600:#1d4ed8;  --blue-50:#e8f0fe;

  /* ---- Primitive: scales ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem;
  --z-base:0; --z-sticky:20; --z-nav:40; --z-overlay:900; --z-modal:1000; --z-toast:1100;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* ---- Brand defaults (overridden per module) ---- */
  --brand-500:#115aa4; --brand-600:#0e4d8e; --brand-050:#e8f0fa; --accent-500:#44bded; --charcoal:#221f20;
  --on-brand:#ffffff;

  /* ---- Fonts (overridden per module) ---- */
  --font-display:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* ---- Semantic (LIGHT) ---- */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-50);
  --surface-sunken:var(--n-100);
  --on-surface:var(--n-900);
  --on-surface-strong:var(--n-950);
  --muted:var(--n-500);
  --border:var(--n-200);
  --border-strong:var(--n-300);
  --primary:var(--brand-500);
  --primary-hover:var(--brand-600);
  --primary-soft:var(--brand-050);
  --on-primary:var(--on-brand);
  --accent:var(--accent-500);
  --success:var(--green-600); --success-soft:var(--green-50);
  --warn:var(--amber-600);    --warn-soft:var(--amber-50);
  --danger:var(--red-600);    --danger-soft:var(--red-50);
  --info:var(--blue-600);     --info-soft:var(--blue-50);
  --ring:color-mix(in srgb, var(--primary) 45%, transparent);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 4px 12px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg:0 18px 40px -12px rgba(16,24,40,.22);
  --scrim:rgba(13,17,23,.5);
}

/* ---- Semantic (DARK) ---- */
:root[data-theme="dark"] {
  --bg:var(--n-950);
  --surface:#161b24;
  --surface-2:#1c222e;
  --surface-sunken:#11151c;
  --on-surface:#e7ecf4;
  --on-surface-strong:#f6f8fc;
  --muted:#93a0b4;
  --border:#2a3341;
  --border-strong:#3a4556;
  --primary-soft:color-mix(in srgb, var(--brand-500) 22%, #0e1117);
  --success-soft:color-mix(in srgb, var(--green-500) 18%, #0e1117);
  --warn-soft:color-mix(in srgb, var(--amber-500) 18%, #0e1117);
  --danger-soft:color-mix(in srgb, var(--red-500) 20%, #0e1117);
  --info-soft:color-mix(in srgb, var(--blue-500) 18%, #0e1117);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 16px -4px rgba(0,0,0,.5);
  --shadow-lg:0 24px 50px -16px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.6);
  color-scheme: dark;
}

/* Honor OS preference before any explicit choice is stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:var(--n-950); --surface:#161b24; --surface-2:#1c222e; --surface-sunken:#11151c;
    --on-surface:#e7ecf4; --on-surface-strong:#f6f8fc; --muted:#93a0b4;
    --border:#2a3341; --border-strong:#3a4556; color-scheme: dark;
  }
}