/* SHELEG Design — Router token layer (light default + dark twin).
   Copy verbatim; consume only var(--…) in components.
   Theme switch: set data-theme="dark" on :root.

   Measured from openrouter.ai on 2026-08-16 — the served stylesheets for the scale,
   and `getComputedStyle` on the running dashboard for what a stylesheet cannot answer.
   Three values a stylesheet-only reading got wrong: their `--text-xs` is 14px and not
   12 (only `--overline` is 12), the sidebar is 224px and not 244, and the border
   asymmetry that looks like a design decision belongs to `--sidebar-border` alone —
   the main seam is symmetric by construction, the ink at 7.8% on light and the cloud
   at 7.8% on dark.

   THE TRIPLET, and it is the one idea worth carrying out of this reference. Every
   status holds three tokens rather than one: `--ok-mark` is painted, `--ok` is written,
   `--ok-weak` is laid under. The reference's own delta is drawn in `#00bf6f` and set in
   `#007544`, and the split is what lets a 97%-saturated hue be an accent without
   becoming an unreadable label. The `-mark` values are identical in both themes,
   because only the words have to be read. */
:root {
  /* The page's side margin. **Declared here because it was declared on `.shell`**, which
     is a sibling of the top bar rather than its ancestor — so three of its five users saw
     nothing at all: the top bar (brand flush against the screen edge), the primary-action
     host, and the mobile navigation panel, whose `left`/`right` were dropped as invalid.
     An absolutely-positioned box with no `left` and no `right` falls back to its STATIC
     position, so the panel opened at the ☰ and ran 82px off a 500px viewport, taking a
     horizontal scrollbar with it. Measured 2026-09-09 on the live page. */
  --gutter: clamp(20px, 4vw, 40px);

  --bg: #f9fbfe;
  --panel: #ffffff; /* the card is white ON the tinted field — that step is the look */
  --panel-2: #f1f3f6;
  --ink: #151b24; /* 16.69 on --bg · 17.30 on --panel */
  --muted: #5c6068; /* 6.09 · 6.31 */
  --border: #e3e6e9; /* ΔL* 7.40 — meets the dark twin's 7.48 rather than its own alpha */
  --border-strong: #ced1d5; /* ΔL* 14.83 against 14.94 */
  /* The control edge is NOT the seam. WCAG 1.4.11 wants 3:1 for the visual boundary of
     a control and the seam above is 1.35 — right for a rule between two paragraphs,
     useless as the edge of a button. On this field no reasonable alpha of the ink
     reaches 3:1 (0.46 gives 2.94), so this is solved rather than stepped.

     **Solved against every surface it is drawn on, since 2026-09-05.** The old value
     was solved against `--bg` alone — 3.05 there — and measured 2.84 against
     `--panel-2`, where `.pick` and the picklist counts sit. Every control carrying
     this border lives inside a card, so `--bg` was the one surface it mostly is NOT
     drawn on. Worst case is now 3.03 (on `--panel-2`), 3.25 on `--bg`, 3.37 on
     `--panel`. */
  --edge: #898c92; /* 3.03 worst of three surfaces */

  /* The reference's own `--or-royal`, 97% saturated. Its `--primary` is the violet
     `#7624f4`, refused for a measured reason: 6.31 on white but 3.14 on ink, where it
     cannot carry a word. The reference agrees — flipping its own register swaps
     `--primary`, `--ring` and `--link` to the acid `#c8ff00`. Changing hue by register
     is its solution too; this pack lifts within one hue instead. */
  --accent: #035ade; /* 5.75 on --bg · 5.96 on --panel */
  --accent-weak: #ebf2fc; /* the accent at the reference's own 7.8% over --panel */
  --accent-ink: #ffffff; /* text ON the accent — 5.96 */

  --ok: #007544; /* 5.58 · 5.79 */
  --ok-weak: #ebfaf4;
  --ok-mark: #00bf6f; /* the reference's own, painted and never written */
  --warn: #8a6100; /* 5.34 · 5.54 */
  --warn-weak: #fdf8eb;
  --warn-mark: #e5a000;
  --danger: #bf0024; /* 6.25 · 6.48 */
  --danger-weak: #ffeff2;
  --danger-mark: #ff2d55;
  /* **`--info` IS the accent, and that is the reference's own decision rather than a
     shortcut.** Its `--color-info` is `#035ade`, the same value as `--or-royal`. A teal
     was tried here first and the palette gate refused it: 9.0 apart from `--ok` at full
     colour against a hard floor of 10.0 — two semantic states in one colour, which no
     amount of secondary encoding excuses. Blue against green separates; teal against
     green does not. */
  --info: #035ade; /* 5.75 · 5.96 — an alias of --accent, measured, not inherited */
  --info-weak: #ebf2fc;

  /* The series, and they are deliberately NOT the accent: a bar wearing the button's
     colour tells the reader the bar is clickable. Two hues (252°, 172°) at two OKLCH
     lightness steps each. Six equal-lightness hues were built first and the arithmetic
     refused them — six distinguishable steps need ~60 L* of range, the dark end is
     bounded by usefulness and the light end runs into the page, so the palest measured
     1.38 against the field. The number of series is a decision of the palette, not of
     the data. Four is what clears: worst 3.31 here, 4.61 in the dark twin. */
  --series-1: #2d88e2; /* 3.66 on --panel */
  --series-2: #025397; /* 7.82 */
  --series-3: #019d7e; /* 3.43 */
  --series-4: #00614d; /* 7.45 */

  --r-control: 6px; /* the reference's most-used radius; every control wears it */
  --r-card: 8px;
  --r-pill: 9999px;
  /* A bottom sheet's top corners and a list's thumbnail (2026-10-19). Larger than a card
     because a sheet is a surface that arrives from the screen edge, and a phone's sheets
     are drawn this way by the platform itself. */
  --r-sheet: 16px;
  --r-thumb: 10px;

  /* Their `box-shadow` is `none` almost everywhere. One lift exists and it is a menu. */
  --shadow-1: 0 1px 2px rgba(21, 27, 36, 0.04), 0 8px 24px rgba(21, 27, 36, 0.08);
  /* Under the bid sheet. The page stays visible through it: the sheet confirms something
     about that page, it does not replace it. */
  --scrim: rgba(21, 27, 36, 0.44);

  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-state: 0.14s;
  --dur-hover: 0.1s;

  /* Their brand face is `gordita`, self-hosted and not licensable to check a stylesheet
     against, so it is not approximated silently — the voice here is `jakarta`, the
     second family they already serve. The mono is theirs unchanged. */
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-data: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Their scale, named by role. Body at 14 and NOT 16 is the density of the whole
     interface, and `--t-meta` at 12 is the only step below it. */
  --t-meta: 12px; /* overline, chip, table caption */
  --t-body: 14px; /* body and dense UI — the workhorse */
  --t-card: 16px; /* card titles, section headings */
  --t-title: 20px;
  --t-section: 24px;
  --t-page: 30px;
  --t-hero: 36px;

  /* Weight 450 rather than 400 is measured: `--font-weight-normal: 450`. It is why
     their body copy reads denser than 14px suggests, and rounding it to 400 or 500
     loses the half step the reference is built on. */
  --w-body: 450;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  --track-tight: -0.025em;
  --track-wide: 0.05em;

  --space-1: 4px; /* their spacing unit is 0.25rem */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  background-color: var(--bg);
  color: var(--ink);
  color-scheme: light; /* the theme is explicit — never let the UA pick */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151d;
  --panel: #181d25;
  --panel-2: #20252c;
  --ink: #f5f7f9; /* 17.05 · 15.75 */
  --muted: #a0a3a7; /* 7.23 · 6.68 */
  --border: #20242c; /* ΔL* 7.48 */
  --border-strong: #30343b; /* 14.94 */
  /* 2.81 against `--panel` and 2.56 against `--panel-2` before 2026-09-05, both under
     the 3:1 that 1.4.11 asks of a control's boundary — the border of every input and
     every secondary button in the app, since all of them sit inside a card. The old
     3.04 was true and was measured against `--bg`. */
  --edge: #6b6e74; /* 3.02 worst of three surfaces */

  --accent: #4d8dff; /* 5.73 · 5.29 — the reference's own dark-register promo value */
  --accent-weak: #1c2636;
  --accent-ink: #10151d; /* text ON the accent — 5.73. White on #4d8dff fails AA. */

  --ok: #34dfaa; /* 10.71 · 9.89 */
  --ok-weak: #162a2b;
  --ok-mark: #00bf6f;
  --warn: #e5a000; /* 8.16 · 7.54 */
  --warn-weak: #282722;
  --warn-mark: #e5a000;
  /* **Not `#ff2d55`, which is what the reference uses here.** On this field it is 5.02
     and clears, but on its OWN chip tint it measures 4.38 — and a danger chip is where
     the word most needs to be read. Lifted until it clears the tint it sits on: 5.13. */
  --danger: #ff5470; /* 5.89 · 5.44 · 5.13 on --danger-weak */
  --danger-weak: #2a1e29;
  --danger-mark: #ff2d55;
  --info: #4d8dff; /* 5.73 · 5.29 — the alias holds in both registers */
  --info-weak: #1c2636;

  /* Same two hues, lifted: OKLCH L .60/.80 at C .15. Worst 4.26 on --panel. */
  --series-1: #2f82d6;
  --series-2: #8dc2fe;
  --series-3: #089678;
  --series-4: #22dcb3;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.36);
  --scrim: rgba(0, 0, 0, 0.56);
}

/* Light is the default register. To follow the OS instead, have the app set
   data-theme="dark" from a prefers-color-scheme listener — keep one switch,
   never two sources of truth for the theme. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-state: 0s;
    --dur-hover: 0s;
  }
}