/* Elizabeth Bridge · brand tokens. The Bridge family layout (Matthieu Bridge's token names, the same
   grammar as public/app and site.css read) with Elizabeth's palette: violet and gold on near-black,
   the tint is gold (the member's own logged data), estimates draw in violet, maps in indigo.
   Sources: elizabeth/design/glass/glass-tokens-elizabeth.css, redesign-v2/tokens.css (type, the read
   register in Plex Serif), 10x/handoff/tokens-10x.css (standing inks, range bar).
   Dark first. Light follows the same names. Every product page loads this file before its own CSS. */

:root, [data-theme="dark"]{
  color-scheme: dark;
  /* wallpaper · near-black with violet and gold at the edges */
  --wall: radial-gradient(1000px 720px at 12% 6%, rgba(191,90,242,.30), transparent 62%),
          radial-gradient(900px 700px at 86% 12%, rgba(220,174,91,.18), transparent 60%),
          radial-gradient(1000px 760px at 58% 110%, rgba(94,92,230,.20), transparent 60%),
          radial-gradient(700px 600px at 26% 84%, rgba(220,174,91,.08), transparent 60%),
          #0B0812;
  --ground: #0B0812;

  /* glass · rail, toolbar capsules, palette, toast */
  --glass:      rgba(24,22,30,.62);
  --glass2:     rgba(44,42,52,.66);
  --glass-line: rgba(255,255,255,.09);
  --glass-hi:   rgba(255,255,255,.10);
  --blur:       blur(40px) saturate(180%);
  --blur-bar:   blur(30px) saturate(180%);
  --blur-pal:   blur(50px) saturate(190%);

  /* the sheet and what sits on it */
  --sheet:      rgba(16,14,20,.58);
  --card:       rgba(255,255,255,.055);
  --card-line:  rgba(255,255,255,.07);
  --card-hover: rgba(255,255,255,.085);
  --card-solid: rgba(34,32,40,.94);
  --fill:  rgba(120,120,128,.28);
  --fill2: rgba(120,120,128,.18);
  --fill3: rgba(120,120,128,.11);
  --sep:   rgba(255,255,255,.08);

  /* text · two inks and a faint one for the absence grammar */
  --t1: #F5F5F7;
  --t2: rgba(235,235,245,.64);
  --t3: rgba(235,235,245,.38);
  --t2-mark: rgba(235,235,245,.58);

  /* the tint · gold. Measured rows, the member's own data, selection, primary buttons.
     On dark, text-safe and bar-safe are the same colour. */
  --tint:      #DCAE5B;
  --tint-bar:  #DCAE5B;
  --tint-soft: rgba(220,174,91,.20);
  --tint-line: rgba(220,174,91,.45);
  --on-tint:   #1D1D1F;
  --tint-text: #DCAE5B;

  /* standing inks · measured is the tint, own words is ink, estimate violet, map indigo, report hatch.
     Two inks never share a style (DONE.md Guardrails 7). */
  --est: #BF5AF2;      --est-soft: rgba(191,90,242,.20);  --est-text: #CF8AF5;
  --map: #7D7AFF;      --map-soft: rgba(125,122,255,.18);
  --hatch: rgba(235,235,245,.34);
  --hatch-fill: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 4px);

  /* meaning · verdicts and states, never identity */
  --good: #30D158;  --good-soft: rgba(48,209,88,.16);  --good-text: #3FDB62;
  --bad:  #FF453A;  --bad-soft:  rgba(255,69,58,.16);  --bad-text:  #FE5749;
  --warn: #FF9F0A;  --warn-soft: rgba(255,159,10,.16); --warn-text: #FF9F0A;
  --watch: #FFD60A;
  --none: var(--t2);                 /* No difference, No change, Too few: the default, never a colour */

  /* system colours */
  --red:#FF453A; --orange:#FF9F0A; --yellow:#FFD60A; --green:#30D158; --teal:#40C8E0;
  --indigo:#5E5CE6; --purple:#BF5AF2; --pink:#FF375F; --gray:#98989D;

  /* the range bar (Wilson 95%) and the bands */
  --rb-w: 140px; --rb-h: 6px; --rb-tick: 2px;
  --rb-band: linear-gradient(90deg, transparent 0%, var(--tint-line) 25%, var(--tint-line) 75%, transparent 100%);

  /* elevation · one light, a hairline ring first */
  --shadow:    0 0 0 .5px rgba(0,0,0,.55), 0 18px 48px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.28);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.6), 0 40px 90px -20px rgba(0,0,0,.72), 0 4px 12px rgba(0,0,0,.32);
  --shadow-card: 0 1px 1px rgba(0,0,0,.12);
  --shadow-tint: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.25);
  --shadow-sel: 0 0 0 1.5px var(--tint-line), 0 8px 24px -8px rgba(0,0,0,.4);
  --ring: 0 0 0 2px var(--tint-line);
}

[data-theme="light"]{
  color-scheme: light;
  --wall: radial-gradient(1000px 720px at 12% 6%, rgba(175,82,222,.18), transparent 62%),
          radial-gradient(900px 700px at 86% 12%, rgba(204,153,66,.16), transparent 60%),
          radial-gradient(1000px 760px at 58% 110%, rgba(88,86,214,.10), transparent 60%),
          radial-gradient(700px 600px at 26% 84%, rgba(204,153,66,.07), transparent 60%),
          #EEE9F2;
  --ground: #EEE9F2;
  --glass: rgba(255,255,255,.58); --glass2: rgba(255,255,255,.80);
  --glass-line: rgba(255,255,255,.75); --glass-hi: rgba(255,255,255,.90);
  --sheet: rgba(255,255,255,.52);
  --card: rgba(255,255,255,.70); --card-line: rgba(0,0,0,.05); --card-hover: rgba(255,255,255,.92); --card-solid: #FFFFFF;
  --fill: rgba(120,120,128,.18); --fill2: rgba(120,120,128,.12); --fill3: rgba(120,120,128,.08); --sep: rgba(60,60,67,.12);
  --t1: #1D1D1F; --t2: rgba(60,60,67,.84); --t3: rgba(60,60,67,.42); --t2-mark: rgba(60,60,67,.58);
  /* on light the tint splits: #8F6412 for text (5.2:1 on white), #CC9942 for bars, dots and the pill */
  --tint: #8F6412; --tint-bar: #CC9942; --tint-text: #7A540C;
  --tint-soft: rgba(204,153,66,.16); --tint-line: rgba(204,153,66,.45); --on-tint: #1D1D1F;
  --est: #AF52DE; --est-soft: rgba(175,82,222,.14); --est-text: #7A22A8;
  --map: #5856D6; --map-soft: rgba(88,86,214,.13);
  --hatch: rgba(60,60,67,.36);
  --good: #1E7F3F; --good-soft: rgba(52,199,89,.16); --good-text: #04752B;
  --bad: #C4261D;  --bad-soft: rgba(255,59,48,.14); --bad-text: #C4261D;
  --warn: #B35A00; --warn-soft: rgba(255,149,0,.16); --warn-text: #9A5803;
  --watch: #7A6200;
  --red:#FF3B30; --orange:#FF9500; --yellow:#FFCC00; --green:#34C759; --teal:#30B0C7;
  --indigo:#5856D6; --purple:#AF52DE; --pink:#FF2D55; --gray:#8E8E93;
  --shadow:    0 0 0 .5px rgba(17,24,39,.07), 0 18px 44px -16px rgba(40,30,60,.20), 0 2px 5px rgba(17,24,39,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 0 0 .5px rgba(17,24,39,.08), 0 40px 90px -24px rgba(40,30,60,.30), 0 4px 12px rgba(17,24,39,.06);
  --shadow-card: 0 1px 2px rgba(17,24,39,.04), 0 6px 16px -10px rgba(17,24,39,.10);
  --shadow-tint: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(60,40,10,.16);
  --shadow-sel: 0 0 0 1.5px var(--tint-line), 0 10px 26px -10px rgba(40,30,60,.18);
}

/* the system's choice when the page sets none */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --wall: radial-gradient(1000px 720px at 12% 6%, rgba(175,82,222,.18), transparent 62%),
            radial-gradient(900px 700px at 86% 12%, rgba(204,153,66,.16), transparent 60%),
            radial-gradient(1000px 760px at 58% 110%, rgba(88,86,214,.10), transparent 60%),
            #EEE9F2;
    --ground: #EEE9F2;
    --glass: rgba(255,255,255,.58); --glass2: rgba(255,255,255,.80); --glass-line: rgba(255,255,255,.75); --glass-hi: rgba(255,255,255,.90);
    --sheet: rgba(255,255,255,.52);
    --card: rgba(255,255,255,.70); --card-line: rgba(0,0,0,.05); --card-hover: rgba(255,255,255,.92); --card-solid: #FFFFFF;
    --fill: rgba(120,120,128,.18); --fill2: rgba(120,120,128,.12); --fill3: rgba(120,120,128,.08); --sep: rgba(60,60,67,.12);
    --t1: #1D1D1F; --t2: rgba(60,60,67,.84); --t3: rgba(60,60,67,.42); --t2-mark: rgba(60,60,67,.58);
    --tint: #8F6412; --tint-bar: #CC9942; --tint-text: #7A540C; --tint-soft: rgba(204,153,66,.16); --tint-line: rgba(204,153,66,.45);
    --est: #AF52DE; --est-soft: rgba(175,82,222,.14); --est-text: #7A22A8; --map: #5856D6; --map-soft: rgba(88,86,214,.13);
    --good: #1E7F3F; --good-text: #04752B; --bad: #C4261D; --bad-text: #C4261D; --warn: #B35A00; --warn-text: #9A5803; --watch: #7A6200;
  }
}

/* type · the Bridge family scale (seven steps, each with its leading and tracking), SF from the system,
   tabular digits. Elizabeth's second register: Plex Serif for the one passage that is read, not scanned
   (the read, a principle in the member's own words). */
:root{
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
  --serif: ui-serif, 'New York', 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono: var(--sans);
  --code: 'SF Mono', ui-monospace, 'Fragment Mono', Menlo, monospace;
  --measure: 34rem;

  --fs-cap:11px;   --lh-cap-px:14px;  --tr-cap-em:.006em;
  --fs-label:12px; --lh-label-px:16px;
  --fs-body:13px;  --lh-body-px:18px;
  --fs-read:17px;  --lh-read-px:28px;                        /* the serif register */
  --fs-title:15px; --lh-title-px:20px; --tr-title-em:-.012em;
  --fs-head:20px;  --lh-head-px:24px;  --tr-head-em:-.018em;
  --fs-fig:28px;   --lh-fig-px:32px;   --tr-fig-em:-.024em;
  --fs-hero:34px;  --lh-hero-px:40px;  --tr-hero-em:-.028em;
  --w-body:400; --w-label:500; --w-strong:600; --w-head:600; --w-fig:600; --w-hero:700;

  /* space · 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* radius · nested radius is outer minus the gap */
  --r-pane:20px; --r-panel:18px; --r-card:16px; --r-tile:14px; --r-row:12px; --r-ctl:10px; --r-btn:9px; --r-tag:5px; --r-full:9999px;

  /* motion · one spring, a few durations */
  --spring: cubic-bezier(.2,.8,.2,1);
  --d-state:200ms; --d-seg:300ms; --d-lift:350ms; --d-pill:450ms; --d-arrive:500ms; --d-tap:90ms; --d-range:450ms; --lag-sem:120ms;

  /* chrome geometry */
  --rail:244px; --rail-mini:56px; --peek:380px; --tap:28px;

  /* aliases · the names table.js and shared parts read */
  --paper: transparent; --field: var(--fill3); --hair: var(--sep);
  --ink: var(--t1); --muted: var(--t2); --faint: var(--t3);
  --accent: var(--tint-bar); --accent-ink: var(--tint); --on-accent: var(--on-tint);
  --mine: var(--tint-bar); --mine-ink: var(--tint); --mine-8: var(--tint-soft);
  --caution: var(--watch);
  --sh-1: var(--shadow-sm); --sh-2: var(--shadow);
  --r: var(--r-card); --rb: var(--r-tile); --ri: var(--r-ctl); --r-chip: var(--r-tag); --r-sheet: var(--r-pane);
  --sel-bg: var(--tint-soft); --line: var(--sep); --panel: var(--card); --num: var(--sans);
}

.num, td, th, .v, .n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  :root{ --d-state:0ms; --d-seg:0ms; --d-lift:0ms; --d-pill:0ms; --d-arrive:0ms; --d-tap:0ms; --d-range:0ms; --lag-sem:0ms; }
}