/* Huntsman web tokens: the only place spacing, type and colour values live (test/webStyleTokens.test.ts lints the rest).
   Spacing scale 4 8 12 16 24 32 48; six text styles and three weights; three corner radii; three content widths (sign-in 420, flows 520, pages 1080); one easing and two durations for motion; one size
   scale for icons, art and controls; the ASCII art's glyph scale. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;
  --text-caption:12px;--text-small:14px;--text-body:16px;--text-heading:20px;--text-title:30px;--text-hero:48px;
  --text-amount:var(--text-hero);
  --weight-regular:400;--weight-medium:500;--weight-bold:600;
  --radius-control:12px;--radius-card:16px;--radius-pill:999px;
  --page-gutter:16px;--content-max:1080px;--flow-max:520px;--auth-max:420px;--measure:16ch;--measure-body:36ch;--col-wide:960px;--col-mid:720px;--chart-h:160px;--motion:200ms;
  --control-h:44px;--safe-bottom:env(safe-area-inset-bottom,0px);--action-h:52px;--action-w:360px;--switch-w:56px;--panel-w:260px;--sidebar-w:240px;
  --dot:8px;--icon-sm:16px;--icon:20px;--mark:28px;--art-sm:48px;--art-md:64px;--art-lg:96px;--art-xl:160px;--art-hero:220px;
  --mist-1:1.8px;--mist-2:2.6px;--mist-3:3.2px;--mist-4:4.5px;--mist-5:6.5px;--mist-6:9px;
  --greenText:#24603f;
  --ease:cubic-bezier(.2,.7,.2,1);--dur-1:150ms;--dur-2:220ms;
}
/* Light = design/APPROVED.md: paper #F5F5F2, cards white, ink #16171A, one blue #2B59E3, up #2F7D57, down #B54A3C. */
:root{color-scheme:light;--bg:#f5f5f2;--panel:#fff;--panel2:#e9e9e4;--ink:#16171a;--muted:#5f6368;--line:#dedfd9;--accent:#2b59e3;--green:#2f7d57;--red:#b54a3c;--mist:#1d43b5;--shade:#16171a14;--scrim:#16171a59;--onink:#fff}
@media (prefers-color-scheme:dark){:root[data-theme=system]{color-scheme:dark;--bg:#080a0b;--panel:#131719;--panel2:#202729;--ink:#f7f8f6;--muted:#a4ada9;--line:#29312e;--accent:#a7b9ff;--green:#49e69b;--red:#ff807a;--mist:#a7b9ff;--shade:#0000004d;--scrim:#000000a6;--onink:#080a0b}}
:root[data-theme=dark]{color-scheme:dark;--bg:#080a0b;--panel:#131719;--panel2:#202729;--ink:#f7f8f6;--muted:#a4ada9;--line:#29312e;--accent:#a7b9ff;--green:#49e69b;--red:#ff807a;--mist:#a7b9ff;--shade:#0000004d;--scrim:#000000a6;--onink:#080a0b}
:root[data-theme=dark]{--greenText:var(--green)}
/* Big amounts are 48px; only under 360px (a phone at 200% zoom) do they shrink, never below the title size. */
@media (max-width:359px){:root{--text-amount:clamp(var(--text-title),12vw,var(--text-hero))}}

/* ===== App shell tokens (web-design-a, Oct 21): content widths, gutters by screen width, motion, bar heights.
   --content-max is the app column (960), --library-max the library grid (1120), --aside-w the agent page's right column.
   Motion: state changes only, 150 to 250 ms, one easing; style.css turns all of it off under prefers-reduced-motion. ===== */
:root{--content-max:960px;--library-max:1120px;--flow-max:520px;--action-w:380px;--aside-w:380px;--topbar-h:64px;--tabbar-h:72px;
  --dur-1:150ms;--dur-2:200ms;--dur-3:250ms;--ease:cubic-bezier(.2,0,0,1)}
@media (min-width:600px){:root{--page-gutter:24px}}
@media (min-width:900px){:root{--page-gutter:32px}}