/* Sindhorn Midtown Internal — canonical design tokens.

   Derived from what the app already uses, not from a new design. Every value
   below is the most-used member of a cluster the codebase had already formed;
   the neighbors it absorbs are listed so the choice is auditable.

   Every component consumes these and nothing else declares a value (the
   ratchet and idui-invariants-smoke.mjs refuse a literal). See /ci for the
   rendered specification. In IDUI terms this file, with fonts.css, is the
   constitution: the one file a second project rewrites (idui-core/README.md).

   Typography: LINE Seed Sans TH only, three weights, zero tracking - the
   zero is this constitution's rule (the font test holds every tracking
   token at 0), not the core's: the core consumes the tokens and declares
   no tracking of its own (r33). */
:root{

  /* ---- Type scale -------------------------------------------------------
     70 distinct font sizes across 380 uses, 47 of them used twice or less.
     Eight steps replace them. Half-pixel neighbors are absorbed upward or
     to the nearest step, which is invisible at 9-13px on a phone. */
  --type-caption:9px;     /* absorbs 8.5 / 9 / 9.5   — ~79 uses */
  --type-micro:10px;      /* absorbs 10 / 10.5       — ~35 uses */
  --type-small:11px;      /* absorbs 11 / 11.5       — ~29 uses */
  --type-body-s:12px;     /* absorbs 12 / 12.5       — ~59 uses */
  --type-body:13px;       /* the single most-used    —  50 uses */
  --type-lead:15px;       /* absorbs 14 / 15         — ~22 uses */
  --type-title:22px;
  --type-section:clamp(21px,5.6vw,27px);      /* absorbs 19-24           — ~14 uses */
  --type-display:clamp(30px,8.5vw,44px);   /* existing hero clamp, unchanged */

  /* Line heights. Labels sit tight, running text breathes. */

  --type-prose:var(--type-body);   /* reading size */
  --leading-tight:1.15;
  --leading-label:1.30;
  --leading-body:1.50;

  /* ---- Weight -----------------------------------------------------------
     Already canonical: 3 values across 169 uses, nothing else in the app.
     Tracking is zero everywhere and is a release invariant. */
  --weight-thin:100;
  --weight-regular:400;
  --weight-bold:700;
  /* Two more slots the core consumes (r33): the weight a label or chip
     carries and the weight of emphasis in running text. Sindhorn's labels
     are regular and its emphasis is bold, so both resolve to values above
     and nothing renders differently. */
  --weight-label:var(--weight-regular);
  --weight-medium:var(--weight-bold);
  /* Tracking: running text, uppercase labels, display titles. All zero
     here; a tracked voice sets each. Case of a display title likewise. */
  --tracking:0;
  --tracking-label:0;
  --tracking-display:0;
  --case-display:none;

  /* ---- Shape ------------------------------------------------------------
     Every radius in the app resolves to one of these; the legacy routes'
     36 distinct values and the override sheet that policed them are gone
     (r31). 14px, the single most-used radius, is --radius-surface. */
  /* Color. Every route had already converged on these three values under its own
     names (--fnb-accent / --fs-accent / --settings-accent and so on). The library
     owns them once so a component can leave its route and still resolve. */
  --app-text:#FAF7F5;
  /* Muted is translucent ink, so its contrast has a ceiling: at .55 it could
     reach 4.5:1 only over a sky darker than 25% grey, which left the bright
     half of the day with no passing Betta at all. .70 (5 Sep 2026) is the
     lowest alpha at which a chosen fish clears 4.5:1 with a margin;
     betta-readability.js measures the same value. */
  --app-muted:rgba(250,247,245,.70);
  --app-line:rgba(250,247,245,.09);
  --app-inset-fill:rgba(250,247,245,.055);
  --app-accent-glow:0 0 10px var(--app-accent);
  --type-prose-style:normal;
   /* the masthead progress already glowed; now it is named */
  --app-accent:#E5ECBE;
  --app-accent-rgb:229,236,190;
  /* The ground every page stands on and the atmosphere paints over (r33:
     was a literal in app-shell.css). */
  --app-ground:#2E273B;
  /* The material (r33: was the :root of app-glass.css). The proven CI blur,
     exactly 18px / saturate(1.18); Vignette pigment lowered to 30% so the
     live Betta remains visible through frost. Floating surfaces - menus,
     dialogs, sheets, toasts - sit over arbitrary content and carry more
     pigment: same blur, heavier fill, one material in two weights (the app's
     own --ci-glass-strong, .72). Do not push that to .92+: it reads as solid
     black and stops being glass. An overlay inside an overlay cannot blur what
     is beneath it, so its tint alone carries legibility (.98). The scrim is a
     darkening and a lighter blur, so the page reads as present but out of
     reach. */
  --app-glass-fill:rgba(46,39,59,.30);
  --app-glass-border:rgba(250,247,245,.14);
  --app-glass-filter:blur(18px) saturate(1.18);
  --app-glass-overlay-fill:rgba(38,32,49,.72);
  --app-glass-nested-fill:rgba(38,32,49,.98);
  --app-glass-scrim-fill:rgba(14,11,19,.48);
  --app-glass-scrim-filter:blur(7px);
  /* The shell band: header and footer are one height each (r33: was a
     literal in app-components.css). */
  --app-shell-band:56px;
  /* Status tones. A state is a tone, never an ad-hoc color: the two values
     the routes had been repeating for "done / live" and "error / down". */
  --app-success:#72A75D;
  --app-danger:#E3A2A8;

  --ratio-page:210/297;
   /* no document previews here; the page is A4 if one ever appears */
  --radius-surface:14px;  /* cards, panels, sheets   —  28 uses */
  --radius-inset:10px;
  /* A framed control - chip, primary, select trigger, icon control -
     shares the inset radius here; a pill-shaped voice sets this alone. */
  --radius-control:var(--radius-inset);
  --radius-tight:8px;
  --radius-dialog:24px;    /* nested surfaces         —  12 uses */
  --radius-pill:999px;    /* chips, rails            —  18 uses */
  --radius-none:0;        /* an option inside a menu: the menu owns the corners */

  /* Control heights — three, by role, and nothing else declares a floor.
     row: a full-width thing you tap (list row, disclosure, field, code cell)
     control: a framed button, chip or select trigger
     inline: a frameless utility, badge or compact select */
  --control-row:52px;
  --control:40px;
  --control-inline:32px;
  /* The reading column. */
  --measure-page:720px;
  /* Long-form copy keeps a reading measure inside the page (r33: was a
     literal in app-components.css). */
  --measure-prose:64ch;

  /* ---- Space ------------------------------------------------------------
     27 distinct gap values, mostly 6-16px near-duplicates of each other. */
  --space-2:4px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;

  /* ---- Icon controls ----------------------------------------------------
     One square for every icon-only control - back, close, the masthead
     account chip - so a close mark is the same size in a dialog head, the
     masthead and the library. The mark inside is always 18px. */
  --size-icon-control:36px;
  /* The face of code: a command in a well, a value read verbatim. */
  --font-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- Motion -----------------------------------------------------------
     Mirrors the existing app-transitions.css contract so there is one
     timing language, not two. */
  --motion-ms:280ms;
  --motion-fast:160ms;
  --motion-reveal:920ms;   /* a data track drawing itself in */
  --motion-view:300ms;     /* one page giving way to the next */
  --motion-view-travel:32px; /* how far off its place a page arrives from */
  
  /* Sindhorn's surfaces are glass, so it does not spring: the overshoot is
     its plain curve and the travel is none. Answered because the core asks. */
  --motion-spring:var(--motion-view);
  --motion-overshoot:var(--motion-ease-inout);
  --motion-spring-travel:0px;
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-inout:ease-in-out; /* a page or a navbar set moving into place */
  --motion-fade:linear;
  /* Sindhorn has no document material. Since r53 the core no longer asks: a
     material is derived by a registered authority, and Sindhorn's is glass.
     Only the document's ink survives here, because ink is not material. */
  --app-document-ink:var(--app-text);

  /* The mark. Opaque and high-contrast whatever the interface is made of: the
     card's QR is scanned off a phone screen, so it may not be glass. These are
     the values it has always drawn, previously literals inside qr-v6.js. */
  --app-qr-ink:#0D1110;
  --app-qr-ground:#F4F1EB;
  /* The step between one metric bar filling and the next. */
  --motion-stagger:45ms;
}

@media (prefers-reduced-motion:reduce){
  :root{ --motion-ms:1ms; --motion-reveal:1ms; --motion-view:1ms; }
}