/* ==========================================================================
   Tablet — Design Tokens (v2, canvas-first)
   Authoritative. BRAND.md explains these values; this file defines them.

   Supersedes brand/archive/stele/ (v1), which was built for a different
   product and a different thesis.
   ========================================================================== */

:root {
  /* ---------- PRIMITIVES ------------------------------------------------ */

  /* Bench — the work surface. Warm grey with the faintest green cast, so
     white cards read as objects lifted off it rather than holes cut into it. */
  --bench-50:  #FBFBF9;
  --bench-100: #F4F5F1;
  --bench-200: #E6E8E1;   /* light neutral — the canvas */
  --bench-300: #D3D6CC;
  --bench-400: #AFB4A6;
  --bench-500: #868C7C;
  --bench-600: #646A5B;
  --bench-700: #4A4F43;
  --bench-800: #32362D;
  --bench-900: #1B1E18;   /* ink */
  --bench-950: #161715;   /* dark ground — near-neutral; see the dark block */

  /* Emerald — PRIMARY. The lead. Mark, brand surfaces, ownership, structure. */
  --emerald-50:  #EDF7F2;
  --emerald-100: #D3EBE0;
  --emerald-200: #A9D8C2;
  --emerald-300: #6FB798;   /* primary, dark theme — see the dark block */
  --emerald-400: #2E9B72;
  --emerald-500: #0F6B4F;   /* primary, light theme */
  --emerald-600: #0C563F;
  --emerald-700: #094230;
  --emerald-800: #072F22;
  --emerald-900: #041D15;

  /* Plum — ACCENT. The pop. Calls to action, highlights, focus. Scarce. */
  --plum-50:  #F7F1F8;
  --plum-100: #EFE2F1;
  --plum-200: #DCC5E0;
  --plum-300: #C79ACD;   /* accent, dark theme */
  --plum-400: #A06BA8;
  --plum-500: #7C4A82;   /* accent, light theme */
  --plum-600: #653D6B;
  --plum-700: #4E2F53;
  --plum-800: #38213C;
  --plum-900: #241527;

  /* ---------- SEMANTICS (light) ----------------------------------------- */

  --canvas:        var(--bench-200);   /* the bench itself */
  --canvas-deep:   var(--bench-300);   /* behind a focused Tablet */
  --surface:       #FDFDFB;            /* a Tablet, a block, a card */
  --surface-sunken:var(--bench-100);
  --surface-inset: var(--bench-50);    /* code wells, inputs */

  /* Three inks, two of them for text. --ink-subtle measures 2.81-3.40:1 on the
     light grounds and 3.86-4.44:1 on the dark ones, so it fails AA for body
     text everywhere and fails even the 3:1 non-text floor on the light canvas.
     It is therefore NOT a text colour: it is for icons, dividers and dots.
     Secondary text is --ink-muted, which clears 4.5:1 on every ground. */
  --ink:        var(--bench-900);
  --ink-muted:  var(--bench-600);
  --ink-subtle: var(--bench-500);   /* icons and dividers only — never text */
  --ink-inverse:var(--bench-50);

  --rule:        rgba(27, 30, 24, 0.12);
  --rule-soft:   rgba(27, 30, 24, 0.06);
  --rule-strong: rgba(27, 30, 24, 0.20);

  /* Primary — the brand. Never a call to action; that is what accent is for. */
  --primary:       var(--emerald-500);
  --primary-hover: var(--emerald-600);
  --primary-ink:   #F2FBF7;
  --primary-wash:  var(--emerald-100);

  /* Accent — the pop. Calls to action, highlights, focus, and nothing else. */
  --accent:       var(--plum-500);
  --accent-hover: var(--plum-600);
  --accent-ink:   #FCF7FD;
  --accent-wash:  var(--plum-100);

  --focus: var(--plum-600);

  /* Where you type is paper. The field carries a light ground and dark ink in
     BOTH themes rather than recessing into --surface-inset, which in dark
     punched a hole in the card. In dark it borrows the light bench and the
     light theme's own inks, so the pairing is one already measured on the
     bench: ink 13.64:1, muted 4.53:1. */
  --field-bg:        var(--surface);
  --field-ink:       var(--ink);
  --field-ink-muted: var(--ink-muted);
  --field-rule:      var(--rule);

  /* ---------- BROWSER SURFACES -------------------------------------------
     The parts nobody draws. Left alone they ship the browser's defaults,
     which belong to no design system — and `color-scheme` is the one that
     actually breaks dark theme, because without it the caret, the scrollbars
     and every native control keep rendering light on a dark ground.
     Selection is Plum: highlighting is attention, and attention is the accent.
     Derived from the four roles; no new hues. */

  color-scheme: light;

  --selection:     rgba(124, 74, 130, 0.26);   /* --accent at 26% */
  --caret:         var(--accent);
  --scroll-thumb:  rgba(27, 30, 24, 0.22);
  --scroll-thumb-hover: rgba(27, 30, 24, 0.34);

  /* ---------- TYPE ------------------------------------------------------- */
  /* Chrome is sans, content is serif. The split is the point: UI you operate
     versus a document you read. */

  --font-ui:   "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-doc:  "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: clamp(2rem, 4vw, 3rem);
  --text-h1:      clamp(1.5rem, 2.6vw, 2rem);
  --text-h2:      1.375rem;
  --text-h3:      1.0625rem;
  --text-doc:     0.9375rem;   /* Tablet body copy */
  --text-ui:      0.875rem;    /* chrome */
  --text-small:   0.75rem;
  --text-micro:   0.6875rem;
  --text-label:   0.5625rem;   /* block labels, uppercase */

  --leading-tight: 1.12;
  --leading-doc:   1.62;
  --leading-ui:    1.45;

  --tracking-tight: -0.028em;
  --tracking-label:  0.16em;

  --measure: 74ch;   /* wider than editorial: this is reference, not prose */

  /* ---------- SPACE ------------------------------------------------------ */
  /* Dense by intent. This is an internal tool used all day, not a landing
     page. Whitespace is earned per block, not sprayed per section. */

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.75rem;
  --space-7: 2.5rem;  --space-8: 3.5rem;  --space-9: 5rem;

  --block-gap:   1rem;      /* between blocks inside a Tablet */
  --tablet-pad:  1.5rem;
  --canvas-gap:  1.5rem;    /* between Tablets on the bench */
  --gutter:      clamp(1rem, 3vw, 2rem);

  /* ---------- RADIUS ------------------------------------------------------ */
  /* Named for the object, not the size — each value belongs to a kind of thing.

     The mark carries both shapes the system uses, so it settles which is which.
     Its outer slab is 60x76 at rx 15: a rounded rectangle at 25% of its short
     edge. Its inner blocks are 34x7 at rx 3.5: exactly h/2, true pills.

     So: containers and controls take the slab. Metadata markers take the pill.
     A chip is one of the little bars inside the slab; a button is the slab. */

  --radius-tablet: 18px;
  --radius-block:  12px;
  --radius-well:   8px;

  /* Controls — the slab ratio held across the size steps rather than one fixed
     value, so a small button is not proportionally rounder than a large one.
     Measured heights are 22.6 / 31.4 / 39.2px; 25% of each is 5.6 / 7.8 / 9.8. */
  --radius-control-sm: 6px;
  --radius-control:    8px;
  --radius-control-lg: 10px;

  /* Inline chrome — a kbd, a highlighted phrase, the fallback focus ring.
     The slab ratio continued down: a kbd renders ~16px tall, and 25% of that
     is 4px. Small enough that it is one step, not three. */
  --radius-inline: 4px;

  /* A true pill. Nothing in the component set is one any more — chips and
     lineage nodes took the control radius, because an edge is an edge. The
     scrollbar thumb is the last real pill and the only thing that reads for. */
  --radius-pill:   999px;

  /* Deprecated alias. --radius-chip was renamed --radius-pill when chips moved
     to the control radius, and a renamed token fails silently: the declaration
     resolves to nothing and the corner just goes square. Kept so existing
     consumers keep working. New code takes --radius-pill for a true pill, or
     --radius-control-sm for a chip. */
  --radius-chip:   var(--radius-pill);

  /* ---------- ELEVATION ---------------------------------------------------- */
  /* Cards lift off the bench. Three steps only — more turns to soup at density. */
  --shadow-rest:  0 1px 2px rgba(27,30,24,.05), 0 6px 16px rgba(27,30,24,.06);
  --shadow-hover: 0 1px 2px rgba(27,30,24,.05), 0 10px 26px rgba(27,30,24,.09);
  --shadow-lift:  0 2px 6px rgba(27,30,24,.08), 0 22px 48px rgba(27,30,24,.14);

  /* ---------- MOTION ------------------------------------------------------- */
  /* Fast. v1's 700-900ms was monument timing; a tool used all day must feel
     immediate. Nothing here exceeds 380ms. */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Drives one thing: the 120ms :active scale(.97) press give on .btn. It is a
     press, not an entrance bounce. */
  /* impeccable-disable-next-line bounce-easing -- press give, not an entrance */
  --ease-pop:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-tap:  120ms;
  --dur-ui:   220ms;
  --dur-move: 380ms;

  /* ---------- ELEVATION LAYERS --------------------------------------------- */
  --z-canvas: 0;
  --z-tablet-lift: 10;
  --z-rail: 100;
  --z-toolbar: 200;
  --z-popover: 300;
  --z-modal: 400;
}

/* ---------- DARK · first-class, not a courtesy ---------------------------
   Internal technical users live here. Both blocks define the same tokens so
   the OS default and an explicit toggle each resolve correctly.

   The grounds are near-neutral and that is deliberate. Chroma runs 0.002-0.004,
   down from as much as 0.021. They used to carry the light bench's grey-green
   cast at full strength — 117-126°, which put them 40-48° from Emerald's 166°:
   close enough to read as the same green, far enough to fight it. The clash was
   worst in the evidence well, where Emerald keywords sit directly on
   --surface-inset, the most saturated ground of the five.

   Chroma is the number to hold, not hue. Below ~0.005 an 8-bit hex rounds to
   whatever hue it lands on — these measure anywhere from 107° to 129° — and at
   that saturation none of it reads. That is the point: there is no longer a
   green there to clash with. Do not "fix" the hue spread; it is quantisation
   noise, and chasing it would mean raising chroma back up.

   Sage gets away with the cast in light theme because at 93% lightness it is
   invisible. At 20% it is not. Lightness is unchanged here, so every contrast
   ratio measured on the bench still holds.

   The dark Emerald is derived the same way the dark Plum is, which it was not
   before. Going light -> dark, Plum drops 0.017 chroma; Emerald used to GAIN
   0.018, which left it 27% more saturated than Plum at almost identical
   lightness. The accent is the colour that is supposed to pull attention, so
   the brand out-punching it inverted the two-colour discipline in practice
   while following it on paper. Emerald now takes the same drop: chroma 0.086
   against Plum's 0.087, so the pair finally carries equal weight. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        var(--bench-950);
    --canvas-deep:   #0F0F0E;
    --surface:       #20211F;
    --surface-sunken:#1A1B19;
    --surface-inset: #121311;

    --ink:        #ECEEE7;
    --ink-muted:  #A5AA9B;
    --ink-subtle: #787E6E;
    --ink-inverse:var(--bench-900);

    --rule:        rgba(236, 238, 231, 0.13);
    --rule-soft:   rgba(236, 238, 231, 0.07);
    --rule-strong: rgba(236, 238, 231, 0.22);

    --primary:       var(--emerald-300);
    --primary-hover: var(--emerald-200);
    --primary-ink:   #04140E;
    --primary-wash:  rgba(111, 183, 152, 0.16);

    --accent:       var(--plum-300);
    --accent-hover: var(--plum-200);
    --accent-ink:   #1A0F1C;
    --accent-wash:  rgba(199, 154, 205, 0.16);

    --focus: var(--plum-300);

  /* Paper, not a well. Sage ground with the light theme's inks on it. */
  --field-bg:        var(--bench-200);
  --field-ink:       var(--bench-900);
  --field-ink-muted: var(--bench-600);
  --field-rule:      rgba(27, 30, 24, 0.18);

  color-scheme: dark;

  --selection:     rgba(199, 154, 205, 0.26);   /* --accent at 26% */
  --scroll-thumb:  rgba(236, 238, 231, 0.20);
  --scroll-thumb-hover: rgba(236, 238, 231, 0.32);

    --shadow-rest:  0 1px 2px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.30);
    --shadow-hover: 0 1px 2px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.38);
    --shadow-lift:  0 2px 6px rgba(0,0,0,.42), 0 22px 48px rgba(0,0,0,.48);
  }
}

:root[data-theme="dark"] {
  --canvas:        var(--bench-950);
  --canvas-deep:   #0F0F0E;
  --surface:       #20211F;
  --surface-sunken:#1A1B19;
  --surface-inset: #121311;

  --ink:        #ECEEE7;
  --ink-muted:  #A5AA9B;
  --ink-subtle: #787E6E;
  --ink-inverse:var(--bench-900);

  --rule:        rgba(236, 238, 231, 0.13);
  --rule-soft:   rgba(236, 238, 231, 0.07);
  --rule-strong: rgba(236, 238, 231, 0.22);

  --primary:       var(--emerald-300);
  --primary-hover: var(--emerald-200);
  --primary-ink:   #04140E;
  --primary-wash:  rgba(111, 183, 152, 0.16);

  --accent:       var(--plum-300);
  --accent-hover: var(--plum-200);
  --accent-ink:   #1A0F1C;
  --accent-wash:  rgba(199, 154, 205, 0.16);

  --focus: var(--plum-300);

  /* Paper, not a well. Sage ground with the light theme's inks on it. */
  --field-bg:        var(--bench-200);
  --field-ink:       var(--bench-900);
  --field-ink-muted: var(--bench-600);
  --field-rule:      rgba(27, 30, 24, 0.18);

  color-scheme: dark;

  --selection:     rgba(199, 154, 205, 0.26);   /* --accent at 26% */
  --scroll-thumb:  rgba(236, 238, 231, 0.20);
  --scroll-thumb-hover: rgba(236, 238, 231, 0.32);

  --shadow-rest:  0 1px 2px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.30);
  --shadow-hover: 0 1px 2px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.38);
  --shadow-lift:  0 2px 6px rgba(0,0,0,.42), 0 22px 48px rgba(0,0,0,.48);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-tap: 1ms; --dur-ui: 1ms; --dur-move: 1ms; }
}