/* Quiet Precision design tokens -- the single source for every custom property
   in the app. Extracted from global.css on 2026-08-19.

   It lives in its own file because onboarding.html does NOT extend base.html and
   never loaded global.css, so on that page --ink, --muted, --line and the whole
   type scale were simply undefined. onboarding.css's own --onb-strong and
   --onb-secondary had been pointed at var(--ink)/var(--muted), which meant they
   resolved to nothing there and every "secondary" line rendered at full ink
   strength -- the page had no text hierarchy at all.

   Load this before any stylesheet that reads a token. Anything that adds a
   token adds it here, not in a page stylesheet. */

/* D31 shared product shell foundation. */
:root {
  /* One typeface for the whole product. Headings used to be Geist while the
     UI was Inter -- two neutral geometric grotesques, too alike to read as
     deliberate contrast and different enough to read as an inconsistency.
     The token is kept (a lot of CSS points at it) but now resolves to the
     same stack as --font-ui; hierarchy comes from size and weight instead. */
  --font-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius-panel: 12px;
  --radius-control: 8px;
  --focus-ring: #0f766e;
  /* One neutral hue. --bg and --muted are blue-cast; --line used to be
     #d7dfdc, which is green-cast, so a green-grey rule ran through every
     card, panel, row and pill of an otherwise blue-grey UI. --bg is also
     lifted a step so the page reads as paper rather than grey. */
  --bg: #fafbfc;
  --panel: #ffffff;
  --panel-soft: #f2f4f6;
  --ink: #191c1e;
  --muted: #515f74;
  --line: #e3e7ec;
  --button: #0f766e;
  --button-hover: #115e59;
  --good: #059669;
  --warning: #d97706;
  --danger: #e11d48;
  /* Soft semantic tints. DESIGN.md documents these (success-soft,
     warning-soft, error-soft) but nothing declared them, so every soft
     pill in the app carried its own literal -- and the same amber was
     spelled three ways. Each role is a trio: -soft (fill), -ink (readable
     text on that fill) and -border. Use the trio for status pills and
     notices; the bare --good/--warning/--danger stay the strong accents. */
  --good-soft: #dcfce7;
  --good-ink: #047857;
  --good-border: #a7f3d0;
  --warning-soft: #fef3c7;
  --warning-ink: #92400e;
  --warning-border: #fcd9a4;
  --danger-soft: #ffe4e6;
  --danger-ink: #be123c;
  --danger-border: #fda4af;
  /* Blue = informational (DESIGN.md). Was only ever a bare #0284c7. */
  --info: #0284c7;
  --info-soft: #e0f2fe;
  --info-ink: #075985;
  --info-border: #bae6fd;
  /* Slate secondary action button -- a real third button rank next to the
     teal primary and the bordered white secondary. */
  --secondary: #334155;
  --secondary-hover: #1f2937;
  /* Palest teal, for a primary-tinted hover on a white control. */
  --button-soft: #f0fdfa;
  /* The documented primary-container: a teal tint with enough body to
     carry a chip or a border, where --button-soft is only a hover wash. */
  --button-container: #ccfbf1;
  --navy: #0d1c2f;
  --surface-container: #edeef0;
  --surface-container-highest: #e1e2e4;
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  /* Scroll-under dissolve: how deep the fade under a pinned surface runs.
     Deep enough to kill the hard clip line, shallow enough that the card
     below is not visibly greyed -- an earlier 32px pass washed out a whole
     alert pill. One token so the nav, the Daily Bonus card and the ledger
     heads cannot drift apart. */
  --dissolve-depth: 20px;
  /* Type scale (DESIGN.md > typography). Round px expressed in rem so a
     reader's raised browser default still scales the whole product. */
  --type-headline-sm: 1.5rem;    /* 24 */
  --type-body-lg: 1.125rem;      /* 18 */
  --type-body-md: 1rem;          /* 16 */
  --type-body-sm: 0.875rem;      /* 14 */
  --type-label-caps: 0.75rem;    /* 12 */
  --type-mono: 0.9375rem;        /* 15 */
  --type-mono-sm: 0.6875rem;     /* 11 */
}