/* ==========================================================================
   StudySkewl UI v4 tokens: "Precision Blocks" (CONTRACT-ui-v4.md).
   Every stylesheet references these tokens only. Light + dark, two densities,
   a user accent (light/dark triplets emitted by head.php) and per-lab tints.
   Loaded first by head.php; the exam room never loads this file.
   ========================================================================== */

:root {
  /* ---- type ---- */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* code only */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; --fs-48: 48px; --fs-64: 64px;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-ui: 1.45; --lh-body: 1.6;
  --track-display: -0.03em; --track-title: -0.015em;

  /* ---- geometry: blocks are square ---- */
  --r-0: 0px;           /* default for panels, cards, buttons, inputs, menus, modals, tables, badges */
  --r-1: 2px;           /* only for tiny inner marks (checkbox tick box, progress caps) */
  --r-round: 9999px;    /* avatars, toggle switches, radio dots, presence dots ONLY */
  --bw: 1px; --bw-strong: 2px;

  /* ---- space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- density (comfortable default) ---- */
  --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-lg: 44px;
  --ctl-px: 14px;
  --pad: 20px;           /* panel inner padding */
  --pad-sm: 12px;
  --row-h: 44px;         /* table/list row */
  --gap: 16px;           /* grid gap between blocks (0 when tiled, see .tiles) */
  --fs-ui: 14px;         /* default UI text */
  --fs-body: 15px;       /* reading text */

  /* ---- layout ---- */
  --sidebar-w: 248px; --sidebar-w-collapsed: 60px; --topbar-h: 56px; --content-max: 1440px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms; --t: 180ms; --t-slow: 280ms;

  /* ---- z ---- */
  --z-sidebar: 40; --z-topbar: 30; --z-dropdown: 60; --z-modal: 80; --z-toast: 90; --z-palette: 95;

  /* ---- status hues (theme-independent triplets; use with rgb(... / a)) ---- */
  --c-success: 22 163 74; --c-warning: 217 119 6; --c-danger: 220 38 38; --c-info: 37 99 235;

  /* ---- data viz categorical (validated for both themes) ---- */
  --viz-1: #0f9488; --viz-2: #2563eb; --viz-3: #d97706; --viz-4: #db2777;
  --viz-5: #65a30d; --viz-6: #7c3aed; --viz-7: #0891b2; --viz-8: #dc2626;

  /* ---- lab tints (light values; dark overrides below) ---- */
  --lab-math: 37 99 235;       /* blue */
  --lab-code: 101 163 13;      /* lime */
  --lab-chess: 161 98 7;       /* walnut */
  --lab-japanese: 220 38 38;   /* torii red */
  --lab-languages: 219 39 119; /* magenta */
  --lab-testprep: 79 70 229;   /* exam indigo */
  --lab-giancarlo: 8 145 178;  /* copilot cyan */
  --lab-practice: 15 118 110;  /* brand teal */
  --lab-whiteboard: 234 88 12; /* marker orange */
  --lab: var(--accent);        /* overridden by html[data-lab] */
}

/* ---------- LIGHT (default) ---------- */
:root,
:root[data-theme="light"] {
  --accent: var(--accent-l, 15 118 110);       /* triplet; head.php sets --accent-l/--accent-d */
  --accent-2: var(--accent2-l, 37 99 235);
  --on-accent: #ffffff;                         /* text/icons on accent fills */

  --canvas: #f3f4f6;         /* app background */
  --surface: #ffffff;        /* panels, cards */
  --surface-2: #f8f9fb;      /* inset areas, table headers, hover rows */
  --surface-3: #eef0f3;      /* pressed, selected-neutral, tiles behind tiles */
  --surface-inv: #0b1220;    /* inverted blocks (tooltips, dark feature blocks) */
  --border: #e2e5ea;
  --border-strong: #c9ced6;
  --text: #0b1220;           /* primary ink */
  --text-2: #3f4856;         /* secondary */
  --text-3: #626b79;         /* tertiary, placeholders, meta */
  --text-inv: #f5f7fa;
  --focus: rgb(var(--accent) / .55);
  --scrim: rgb(11 18 32 / .45);
  --shadow-pop: 0 1px 2px rgb(11 18 32 / .06), 0 12px 32px -8px rgb(11 18 32 / .18); /* floating only */

  /* Tailwind remap triplets (see head.php): `white` = strongest ink, `slate-N` = ink ramp */
  --tw-white: 11 18 32;
  --tw-black: 255 255 255;
  --tw-slate-50: 11 18 32;   --tw-slate-100: 17 24 39;  --tw-slate-200: 31 41 55;  --tw-slate-300: 55 65 81;
  --tw-slate-400: 91 101 116; --tw-slate-500: 98 107 121; --tw-slate-600: 148 156 168; --tw-slate-700: 203 208 216;
  --tw-slate-800: 226 229 234; --tw-slate-900: 243 244 246; --tw-slate-950: 255 255 255;

  /* legacy aliases so un-migrated module CSS keeps working */
  --bg: var(--canvas); --bg-2: var(--surface-2); --muted: var(--text-3); --radius: var(--r-0);
}

:root[data-theme="light"] { color-scheme: light; }

/* ---------- DARK ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: var(--accent-d, 45 212 191);
  --accent-2: var(--accent2-d, 96 165 250);
  --on-accent: #04110f;

  --canvas: #0a0c10;
  --surface: #111419;
  --surface-2: #161a20;
  --surface-3: #1d222a;
  --surface-inv: #f5f7fa;
  --border: #232831;
  --border-strong: #333a46;
  --text: #eceff3;
  --text-2: #aab2bf;
  --text-3: #8a93a0;
  --text-inv: #0b1220;
  --focus: rgb(var(--accent) / .6);
  --scrim: rgb(0 0 0 / .6);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / .04), 0 16px 40px -8px rgb(0 0 0 / .7);

  --tw-white: 255 255 255;
  --tw-black: 0 0 0;
  --tw-slate-50: 248 250 252;  --tw-slate-100: 236 239 243; --tw-slate-200: 214 219 226; --tw-slate-300: 190 197 207;
  --tw-slate-400: 160 168 180; --tw-slate-500: 138 147 160; --tw-slate-600: 82 90 104;  --tw-slate-700: 51 58 70;
  --tw-slate-800: 29 34 42;    --tw-slate-900: 17 20 25;    --tw-slate-950: 10 12 16;

  --lab-math: 96 165 250; --lab-code: 163 230 53; --lab-chess: 217 164 65; --lab-japanese: 248 113 113;
  --lab-languages: 244 114 182; --lab-testprep: 129 140 248; --lab-giancarlo: 34 211 238;
  --lab-practice: 45 212 191; --lab-whiteboard: 251 146 60;
}

/* ---------- density ---------- */
:root[data-density="compact"] {
  --ctl-h: 30px; --ctl-h-sm: 26px; --ctl-h-lg: 38px; --ctl-px: 10px;
  --pad: 14px; --pad-sm: 8px; --row-h: 34px; --gap: 12px; --fs-ui: 13px; --fs-body: 14px;
}

/* ---------- lab tint switch (set by head.php from View::$lab) ---------- */
html[data-lab="math"] { --lab: var(--lab-math); }
html[data-lab="code"] { --lab: var(--lab-code); }
html[data-lab="chess"] { --lab: var(--lab-chess); }
html[data-lab="japanese"] { --lab: var(--lab-japanese); }
html[data-lab="languages"] { --lab: var(--lab-languages); }
html[data-lab="testprep"] { --lab: var(--lab-testprep); }
html[data-lab="giancarlo"] { --lab: var(--lab-giancarlo); }
html[data-lab="practice"] { --lab: var(--lab-practice); }
html[data-lab="whiteboard"] { --lab: var(--lab-whiteboard); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}

/* ---------- Tailwind tone remap (head.php maps rose/amber/emerald/orange/violet/sky 200-400 here) ----------
   Light mode darkens the pastel tones that were tuned for the old dark-only UI so they stay legible on white. */
:root, :root[data-theme="light"] {
  --tw-rose-200: 159 18 57;  --tw-rose-300: 190 18 60;  --tw-rose-400: 225 29 72;
  --tw-amber-200: 146 64 14; --tw-amber-300: 180 83 9;  --tw-amber-400: 217 119 6;
  --tw-emerald-200: 6 95 70; --tw-emerald-300: 4 120 87; --tw-emerald-400: 5 150 105;
  --tw-orange-300: 194 65 12; --tw-orange-400: 234 88 12;
  --tw-violet-300: 109 40 217; --tw-violet-400: 124 58 237;
  --tw-sky-300: 3 105 161; --tw-sky-400: 2 132 199;
}
:root[data-theme="dark"] {
  --tw-rose-200: 254 205 211; --tw-rose-300: 253 164 175; --tw-rose-400: 251 113 133;
  --tw-amber-200: 253 230 138; --tw-amber-300: 252 211 77; --tw-amber-400: 251 191 36;
  --tw-emerald-200: 167 243 208; --tw-emerald-300: 110 231 183; --tw-emerald-400: 52 211 153;
  --tw-orange-300: 253 186 116; --tw-orange-400: 251 146 60;
  --tw-violet-300: 196 181 253; --tw-violet-400: 167 139 250;
  --tw-sky-300: 125 211 252; --tw-sky-400: 56 189 248;
}

/* status ink: text colour for status words on surfaces (darker in light mode) */
:root, :root[data-theme="light"] { --ink-success: 21 128 61; --ink-warning: 146 64 14; --ink-danger: 200 30 30; --ink-info: 29 78 216; }
:root[data-theme="dark"] { --ink-success: 74 222 128; --ink-warning: 251 191 36; --ink-danger: 248 113 113; --ink-info: 96 165 250; }

/* user preference: reduce motion (preferences.reduce_motion -> html[data-reduce-motion]) */
html[data-reduce-motion] { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }