/* Caverio build-0 tokens.
   Direction A, "Instrument" (design-options-2026-09-27/OPTIONS.md section 2). PROVISIONAL:
   Thomas 2026-09-27 01:41, "option A is much closer, still needs some work".
   Every colour, type size, weight, tracking, spacing step, radius, hairline, motion duration and
   clock geometry value used by components.css and lib/ lives here. Change this file, not the components.
   A [data-theme="b"] block with option B ("Survey", OPTIONS.md section 3) follows the A block; load any page
   with ?theme=b to see it. */

:root {
  /* ---------- ground: the page ---------- */
  --c-ground: #0B0E10;
  /* ---------- surface: the few raised areas (search, drawers open, filled blocks sit on it) ---------- */
  --c-surface: #12161A;
  --c-raised: #191E23;

  /* ---------- ink: text at three strengths, hairlines, hatch ---------- */
  --c-ink: #E4E8EB;
  --c-ink-rgb: 228, 232, 235;
  --c-hairline: rgba(var(--c-ink-rgb), .10);          /* hairline ink at 10% */
  --c-hairline-strong: rgba(var(--c-ink-rgb), .18);
  --c-tint: rgba(var(--c-ink-rgb), .06);              /* bullet-bar track, faint fills */
  --c-hatch: rgba(var(--c-ink-rgb), .28);             /* 45 degree hatch strokes */

  /* ---------- evidence: evidence present, increase (ice blue) ---------- */
  --c-evidence: #72C3E6;
  --c-evidence-rgb: 114, 195, 230;
  --c-evidence-fill: rgba(var(--c-evidence-rgb), .55); /* bars on the money lane */
  --c-evidence-soft: rgba(var(--c-evidence-rgb), .35);

  /* ---------- weakening: decrease, contradiction (burnt orange); marks and short words only ---------- */
  --c-weakening: #C8742E;

  /* ---------- neutral: information, body, supporting numbers (ink 72%) ---------- */
  --c-neutral: rgba(var(--c-ink-rgb), .72);

  /* ---------- unknown: ink 54% plus hatch; a pattern, never a hue ---------- */
  --c-unknown: rgba(var(--c-ink-rgb), .54);

  /* ---------- stale: ink 54% plus a dotted underline on the number ---------- */
  --c-stale: rgba(var(--c-ink-rgb), .54);
  --stale-underline: dotted;

  /* ---------- safety: crimson. Filled block with ground text, or the state word at 22 px. Never small text (3.94:1). ---------- */
  --c-safety: #D6336C;
  --c-on-safety: var(--c-ground);

  /* ---------- user: pale chalk. Last look, entry, watch; the You lane. ---------- */
  --c-user: #E9E3A4;

  /* ---------- type families ---------- */
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- type sizes (desktop; phone values below) ---------- */
  --t-state: 22px;          /* state word */
  --t-hero: 44px;           /* hero number */
  --t-hero-ref: 13px;       /* reference beside the hero */
  --t-sentence: 16px;       /* evidence sentence */
  --t-body: 14px;
  --t-caption: 11.5px;      /* provenance voice; never larger */
  --t-clock: 12px;          /* HH:MMZ and "4m" */
  --t-label: 11px;          /* section labels, lane labels */
  --t-row-value: 16px;      /* number row values */
  --t-list-hero: 20px;      /* hero figure on a Now row */
  --t-title: 20px;          /* token symbol in the room header */
  --t-wordmark: 13px;       /* app bar */
  --t-wordmark-signin: 28px;
  --t-glyph: 12px;

  /* ---------- weights ---------- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ---------- tracking and case ---------- */
  --tr-wordmark: .32em;
  --tr-state: .06em;
  --tr-label: .12em;
  --tr-lane: .08em;
  --tr-hero: -.01em;
  --case-state: uppercase;
  --case-wordmark: uppercase;

  /* ---------- line heights ---------- */
  --lh-body: 1.45;
  --lh-sentence: 1.5;
  --lh-tight: 1.2;
  --lh-caption: 1.35;

  /* ---------- spacing: 4 px base, steps 4 / 8 / 12 / 16 / 24 / 32 ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --page-max: 1280px;
  --row-h: 32px;            /* desktop row */
  --touch: 44px;            /* phone minimum, Apple HIG via T7 */

  /* ---------- radius and hairline ---------- */
  --radius: 2px;
  --hairline: 1px;
  --focus-ring: 2px;

  /* ---------- marks ---------- */
  --wm-tick: 7px;           /* the "reading" square before CAVERIO */
  --wm-tick-radius: 0;
  --wm-tick-colour: var(--c-ink);
  --wm-rule: 40px;          /* hairline after the wordmark */
  --dot-state: 10px;        /* StateLine dot */
  --dot-row: 8px;           /* StateLine dot on a Now row */
  --underline-state: 2px;   /* state change underline */
  --bullet-h: 14px;         /* BulletBar track */
  --bullet-bar: 6px;
  --bullet-tick: 2px;
  --lights-dot: 9px;

  /* ---------- motion: three motions, nothing loops ---------- */
  --m-land: 600ms;          /* (1) an event lands: ring fades once */
  --m-state-out: 120ms;     /* (2) state word out */
  --m-state-in: 200ms;      /*     state word in */
  --m-underline: 400ms;     /*     underline draws once */
  --m-now-step: 60000;      /* (3) now line steps once a minute (ms, read by lib/clock.js) */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- clock geometry (read by lib/clock.js, numbers in CSS px) ---------- */
  --clock-label-w: 84;      /* lane label column */
  --clock-end-w: 150;       /* right column for last values and source captions */
  --clock-axis-h: 26;       /* tick labels on top */
  --clock-lane-h: 46;       /* one lane */
  --clock-lane-price: 58;   /* price lane is taller */
  --clock-lane-you: 22;
  --clock-bracket-h: 34;    /* room under the attention lane for the lag bracket */
  --clock-glyph: 4;         /* glyph radius */
  --clock-hatch: 6;         /* hatch pattern cell */
  --clock-pad: 4;
  --clock-mini-h: 56;       /* Now row strip, T7 48 to 64 */
  --clock-mini-w: 280;
  --clock-compact-below: 480; /* phone collapse to four lanes under this container width */
  --clock-min-w: 640;       /* full strip scrolls inside its box below this */

  /* ---------- SVG strokes on the clock (user units = CSS px) ---------- */
  --sw-mark: 1.2;           /* glyph and point outlines */
  --sw-line: 1.3;           /* lane lines */
  --sw-hatch: 1.4;          /* hatch strokes */
  --sw-strong: 1.6;         /* stair glyph */
  --sw-now: 2;              /* the now line */
  --sw-halo: 3;             /* ground-coloured halo behind gap labels */
  --dash-minor: 1 3;        /* 10-minute minor ticks */
  --dash-open: 3 3;         /* open lag bracket */
  --dash-illus: 2 1.5;      /* illustrative points, suspect print marker */
}

/* phone sizes from OPTIONS.md section 2 */
@media (max-width: 900px) {
  :root {
    --t-state: 20px;
    --t-hero: 36px;
    --t-sentence: 15px;
    --t-body: 15px;
    --t-title: 18px;
    --clock-label-w: 64;
    --clock-end-w: 8;
  }
}

/* prefers-reduced-motion: the three motions become instant changes */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-land: 0ms;
    --m-state-out: 0ms;
    --m-state-in: 0ms;
    --m-underline: 0ms;
    --m-now-step: 60000;
  }
}

/* ============ Option B, "Survey" (OPTIONS.md section 3). Complete; opt in with ?theme=b. ============ */
[data-theme="b"] {
  /* ground, surface */
  --c-ground: #100F0D;
  --c-surface: #181714;
  --c-raised: #201E1A;
  /* ink */
  --c-ink: #ECE7DC;
  --c-ink-rgb: 236, 231, 220;
  --c-hairline: rgba(var(--c-ink-rgb), .11);
  --c-hairline-strong: rgba(var(--c-ink-rgb), .20);
  --c-tint: rgba(var(--c-ink-rgb), .06);
  --c-hatch: rgba(var(--c-ink-rgb), .28);
  /* evidence: mineral teal */
  --c-evidence: #8CC9C1;
  --c-evidence-rgb: 140, 201, 193;
  --c-evidence-fill: rgba(var(--c-evidence-rgb), .55);
  --c-evidence-soft: rgba(var(--c-evidence-rgb), .35);
  /* weakening: terracotta */
  --c-weakening: #C4703F;
  /* neutral: ink 64% */
  --c-neutral: rgba(var(--c-ink-rgb), .64);
  /* unknown, stale */
  --c-unknown: rgba(var(--c-ink-rgb), .54);
  --c-stale: rgba(var(--c-ink-rgb), .54);
  --stale-underline: dotted;
  /* safety: pale block, ground-colour text; the only inverted element */
  --c-safety: #E8E2F8;
  --c-on-safety: var(--c-ground);
  /* user: cartographic ochre, "you" and nothing else */
  --c-user: #D9A94E;
  /* type */
  --f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-state: 34px;
  --t-hero: 24px;
  --t-hero-ref: 13px;
  --t-sentence: 20px;
  --t-body: 16px;
  --t-caption: 12px;
  --t-clock: 12.5px;
  --t-label: 11px;
  --t-row-value: 16px;
  --t-list-hero: 18px;
  --t-title: 20px;
  --t-wordmark: 18px;
  --t-wordmark-signin: 40px;
  --t-glyph: 12px;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --tr-wordmark: -.01em;
  --tr-state: 0em;
  --tr-label: .10em;
  --tr-lane: .06em;
  --tr-hero: 0em;
  --case-state: none;
  --case-wordmark: lowercase;
  --lh-body: 1.5;
  --lh-sentence: 1.35;
  --lh-tight: 1.2;
  --lh-caption: 1.35;
  /* spacing: 8 / 12 / 20 / 32 / 48 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-6: 32px;
  --s-8: 48px;
  --page-max: 1280px;
  --row-h: 36px;
  --touch: 44px;
  --radius: 2px;
  --hairline: 1px;
  --focus-ring: 2px;
  /* marks: the wordmark's tick becomes the ochre observation dot */
  --wm-tick: 7px;
  --wm-tick-radius: 50%;
  --wm-tick-colour: var(--c-user);
  --wm-rule: 0px;
  --dot-state: 10px;
  --dot-row: 8px;
  --underline-state: 2px;
  --bullet-h: 14px;
  --bullet-bar: 6px;
  --bullet-tick: 2px;
  --lights-dot: 9px;
  /* motion: leader line 400 ms, state wash 900 ms */
  --m-land: 400ms;
  --m-state-out: 300ms;
  --m-state-in: 300ms;
  --m-underline: 900ms;
  --m-now-step: 60000;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* clock */
  --clock-label-w: 84;
  --clock-end-w: 150;
  --clock-axis-h: 26;
  --clock-lane-h: 50;
  --clock-lane-price: 62;
  --clock-lane-you: 24;
  --clock-bracket-h: 36;
  --clock-glyph: 4;
  --clock-hatch: 6;
  --clock-pad: 4;
  --clock-mini-h: 56;
  --clock-mini-w: 280;
  --clock-compact-below: 480;
  --clock-min-w: 640;
  --sw-mark: 1.2;
  --sw-line: 1.3;
  --sw-hatch: 1.4;
  --sw-strong: 1.6;
  --sw-now: 2;
  --sw-halo: 3;
  --dash-minor: 1 3;
  --dash-open: 3 3;
  --dash-illus: 2 1.5;
}
@media (max-width: 900px) {
  [data-theme="b"] {
    --t-state: 30px;
    --t-hero: 22px;
    --t-sentence: 17px;
    --t-body: 16px;
    --t-title: 18px;
    --clock-label-w: 64;
    --clock-end-w: 8;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="b"] {
    --m-land: 0ms;
    --m-state-out: 0ms;
    --m-state-in: 0ms;
    --m-underline: 0ms;
  }
}