/* ==========================================================================
   DeetCode BENCH tokens

   One rule decides every surface: RAISED SURFACES ARE LIGHTER THAN THEIR
   SURROUND. Depth comes from the step between surface tokens, never from
   effects. So, in both themes:

     - no inner shadows, bezel gradients or top-edge highlights on cards
     - no gradients on buttons, borders, text or badges
     - no glow halos, no blur or glassmorphism
     - the accent is a flat colour, used on primary CTAs, active nav, selected
       rows (accent-subtle), focus rings and links. Nothing else.

   Dark is the default. Light is designed separately rather than inverted:
   its raised surfaces are white on a grey base, and overlays carry
   border-strong plus a real shadow because white-on-white has no step.

   Theme selection: an explicit data-theme on <html> wins. Without one, the
   OS preference decides. The navbar toggle writes data-theme and persists it
   in localStorage("theme"); a blocking snippet in <head> restores it before
   first paint so there is no flash.

   --------------------------------------------------------------------------
   Contrast (WCAG 2.2, ratio against each surface it is used on)

   DARK                 sunken  base   raised  overlay  accent-subtle
   text-primary          15.43  14.87  13.50   12.07    12.26
   text-secondary         7.99   7.70   6.99    6.25     6.35
   text-tertiary          5.80   5.59   5.07    4.53     4.61
   accent-text (links)    7.28   7.02   6.37    5.69     5.78
   signal-cyan            6.62   6.38   5.79    5.18     5.26
   diff-easy              5.84   5.63   5.11    4.57     4.64
   diff-medium            8.25   7.95   7.22    6.45     6.55
   diff-hard              5.80   5.59   5.07    4.53     4.61
   white on accent-fill   4.58 rest / 4.90 hover / 5.62 press
   focus ring (accent)    4.11 base / 3.73 raised / 3.34 overlay   (needs 3)
   border-control         3.32 base / 3.01 raised / 3.44 sunken    (needs 3)

   LIGHT                sunken  base   raised  overlay  accent-subtle
   text-primary          15.60  16.73  18.05   18.05    15.60
   text-secondary         6.84   7.34   7.92    7.92     6.84
   text-tertiary          4.51   4.84   5.22    5.22     4.51
   accent-text (links)    6.35   6.81   7.35    7.35     6.35
   signal-cyan            4.86   5.21   5.62    5.62     4.86
   diff-easy              4.91   5.26   5.68    5.68     4.91
   diff-medium            4.55   4.88   5.27    5.27     4.55
   diff-hard              4.66   5.00   5.40    5.40     4.66
   white on accent-fill   6.02 rest / 7.35 hover / 8.52 press
   focus ring (accent)    5.58 base / 6.02 raised / 6.02 overlay
   border-control         3.22 base / 3.48 raised / 3.00 sunken

   text-disabled is exempt (WCAG 1.4.3 excludes inactive controls) and is
   2.1-2.4:1 on purpose.

   Where the brief's value failed AA, the hue is kept and only lightness moves
   (OKLab L), by the smallest step that passes on every surface the colour is
   used on:

     dark  text-tertiary  #727785 -> #8A909E   was 3.63 on raised
     dark  diff-hard      #C96A5B -> #D57565   was 4.40 on raised
     light text-tertiary  #767B8A -> #686C7B   was 3.65 on sunken
     light diff-medium    #A5731A -> #936200   was 3.84 on base
     dark  button fill    #7C5CFF -> #7858FB   white was 4.35 on #7C5CFF

   --accent itself stays #7C5CFF for rings, indicators and selection; only
   the button fill uses the AA ramp. The two are within 2 dE of each other.

   Difficulty and colour vision: under a simulated deuteranopia (Machado
   2009, full severity) Easy/Hard sit 20-26 dE apart, which is distinguishable
   but not safe on its own. So colour is never the only channel: the
   difficulty mark is a 1/2/3-segment meter and always carries its word.

   Accent vs Medium in the same row: #7C5CFF and #D9A441 are 142 dE apart
   (136 under deuteranopia: blue vs. olive-yellow). Light: 139 / 132.

   Themes can also be scoped: any element with data-theme="dark" or
   data-theme="light" re-declares the raw palette, so a section can render in
   the other theme (the /design reference page shows both side by side).
   ========================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --bg-sunken: #121318;
  --bg-base: #16171d;
  --bg-raised: #1e2029;
  --bg-overlay: #262933;
  --bg-hover: #23252f; /* raised + one step, rows and menu items */
  --bg-press: #262933; /* pressed controls */
  --bg-hover-overlay: #2e313c; /* hover inside menus and dialogs */
  --input-bg: var(--bg-sunken); /* inputs are wells: darker than their card */
  --accent-hair: #3b3260; /* hairline around accent-subtle chips */
  --backdrop: rgba(9, 10, 13, 0.62);

  --border-hair: #2e313c;
  --border-strong: #3c404d;
  --border-control: #666a78; /* input and checkbox outlines, 3:1 */

  --text-primary: #e9eaee;
  --text-secondary: #a6aab6;
  --text-tertiary: #8a909e;
  --text-disabled: #4e525e;
  --text-on-accent: #ffffff;

  --accent: #7c5cff;
  --accent-hover: #8e72ff;
  --accent-press: #6a4ae6;
  --accent-subtle: #2a2440;
  --accent-text: #a693ff;
  --accent-fill: #7858fb;
  --accent-fill-hover: #7254f4;
  --accent-fill-press: #6a4ae6;

  --signal-cyan: #4fa3d1;

  --diff-easy: #5b9e7a;
  --diff-medium: #d9a441;
  --diff-hard: #d57565;

  --danger-subtle: #3a2226;

  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-drag: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* code: the editor theme and every code sample on the site */
  --code-bg: var(--bg-sunken);
  --code-gutter: #6b7080;
  --code-line-active: #191a21;
  --code-selection: #2f2a4a;
  --syn-text: #c9cbd3;
  --syn-keyword: #4fa3d1;
  --syn-string: #7db894;
  --syn-number: #d9a441;
  --syn-comment: #8a909e;
  --syn-def: #e9eaee;
  --syn-meta: #d57565;

  /* scope: CH1 amber and CH2 cyan, the bench-scope convention */
  --scope-bg: #0f1014;
  --scope-grid: #23252e;
  --scope-axis: #343744;
  --scope-ch1: #d9a441;
  --scope-ch2: #4fa3d1;

  /* type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-md: 0.875rem; /* 14 */
  --text-base: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: 2.25rem; /* 36 */
  --text-display: clamp(2.75rem, 1.6rem + 4.9vw, 5.25rem); /* 44 -> 84 */

  /* 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;

  /* shape: controls and cards 8, overlays and showcase cards 10 */
  --radius-xs: 4px;
  --radius: 8px;
  --radius-lg: 10px;

  /* layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 56px;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* stacking */
  --z-sticky: 20;
  --z-nav: 100;
  --z-drawer: 200;
  --z-dialog: 300;
  --z-toast: 400;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg-sunken: #eeeef2;
    --bg-base: #f6f6f9;
    --bg-raised: #ffffff;
    --bg-overlay: #ffffff;
    --bg-hover: #f2f2f6;
    --bg-press: #e6e6ec; /* pressed controls: one step darker in light */
    --bg-hover-overlay: #f2f2f6;
    --input-bg: var(--bg-base);
    --accent-hair: #dcd3ff;
    --backdrop: rgba(21, 22, 28, 0.32);

    --border-hair: #e0e0e7;
    --border-strong: #c5c6d0;
    --border-control: #888992;

    --text-primary: #15161c;
    --text-secondary: #4c5160;
    --text-tertiary: #686c7b;
    --text-disabled: #a9acb7;

    --accent: #6442e8;
    --accent-hover: #5435d6;
    --accent-press: #4a2dc4;
    --accent-subtle: #f0ecff;
    --accent-text: #5435d6;
    --accent-fill: #6442e8;
    --accent-fill-hover: #5435d6;
    --accent-fill-press: #4a2dc4;

    --signal-cyan: #1d6e98;

    --diff-easy: #2e7355;
    --diff-medium: #936200;
    --diff-hard: #b04a3c;
    --danger-subtle: #fbeceb;

    --shadow-overlay: 0 1px 2px rgba(21, 22, 28, 0.06), 0 8px 24px rgba(21, 22, 28, 0.12);
    --shadow-drag: 0 4px 12px rgba(21, 22, 28, 0.14);

    --code-bg: #ffffff;
    --code-gutter: #8a8e9b;
    --code-line-active: #f6f6f9;
    --code-selection: #e4ddff;
    --syn-text: #2b2e38;
    --syn-keyword: #1d6e98;
    --syn-string: #2e7355;
    --syn-number: #936200;
    --syn-comment: #686c7b;
    --syn-def: #15161c;
    --syn-meta: #b04a3c;

    --scope-bg: #fbfbfd;
    --scope-grid: #e6e6ec;
    --scope-axis: #c5c6d0;
    --scope-ch1: #a5731a;
    --scope-ch2: #1d6e98;
  }
}

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

  --bg-sunken: #eeeef2;
  --bg-base: #f6f6f9;
  --bg-raised: #ffffff;
  --bg-overlay: #ffffff;
  --bg-hover: #f2f2f6;
  --bg-press: #e6e6ec;
  --bg-hover-overlay: #f2f2f6;
  --input-bg: var(--bg-base);
  --accent-hair: #dcd3ff;
  --backdrop: rgba(21, 22, 28, 0.32);

  --border-hair: #e0e0e7;
  --border-strong: #c5c6d0;
  --border-control: #888992;

  --text-primary: #15161c;
  --text-secondary: #4c5160;
  --text-tertiary: #686c7b;
  --text-disabled: #a9acb7;

  --accent: #6442e8;
  --accent-hover: #5435d6;
  --accent-press: #4a2dc4;
  --accent-subtle: #f0ecff;
  --accent-text: #5435d6;
  --accent-fill: #6442e8;
  --accent-fill-hover: #5435d6;
  --accent-fill-press: #4a2dc4;

  --signal-cyan: #1d6e98;

  --diff-easy: #2e7355;
  --diff-medium: #936200;
  --diff-hard: #b04a3c;
  --danger-subtle: #fbeceb;

  --shadow-overlay: 0 1px 2px rgba(21, 22, 28, 0.06), 0 8px 24px rgba(21, 22, 28, 0.12);
  --shadow-drag: 0 4px 12px rgba(21, 22, 28, 0.14);

  --code-bg: #ffffff;
  --code-gutter: #8a8e9b;
  --code-line-active: #f6f6f9;
  --code-selection: #e4ddff;
  --syn-text: #2b2e38;
  --syn-keyword: #1d6e98;
  --syn-string: #2e7355;
  --syn-number: #936200;
  --syn-comment: #686c7b;
  --syn-def: #15161c;
  --syn-meta: #b04a3c;

  --scope-bg: #fbfbfd;
  --scope-grid: #e6e6ec;
  --scope-axis: #c5c6d0;
  --scope-ch1: #a5731a;
  --scope-ch2: #1d6e98;
}

/* --------------------------------------------------------------------------
   Derived roles and legacy names. Declared on every theme root so they
   resolve against that theme's palette rather than inheriting the page's.
   Pages written before BENCH read the legacy names; mapping them here moves
   every old page onto the new palette without touching its markup.
   -------------------------------------------------------------------------- */
:root,
[data-theme] {
  --success: var(--diff-easy);
  --warning: var(--diff-medium);
  --danger: var(--diff-hard);

  --bg-dark: var(--bg-base);
  --bg-card: var(--bg-raised);
  --bg-card-hover: var(--bg-hover);
  --bg-navbar: var(--bg-base);
  --bg-panel: var(--bg-raised);
  --bg-toolbar: var(--bg-raised);
  --bg-console: var(--bg-sunken);
  --bg-code: var(--code-bg);
  --primary: var(--accent-text);
  --primary-dim: var(--accent-subtle);
  --secondary: var(--signal-cyan);
  --text-main: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-code: var(--syn-text);
  --border: var(--border-hair);
  --glass: var(--bg-raised);
  --glass-border: var(--border-hair);
  --font-main: var(--font-sans);
}