/* =====================================================================
   DISTRIBB TOKENS  /static/brand/tokens.css  (v1, 4 Nov 2026)
   The single source of every colour, size, radius, shadow and timing.
   Loaded first by marketing pages (brand/_head.html) and by app pages
   (brand/_app_tokens.html). It only declares custom properties, so it is
   safe to load on any legacy page: it restyles nothing by itself.
   A value that is not here does not exist. Real third-party UIs in
   realui.css are the one exception: they use their own product's values.
   ===================================================================== */
:root{
  color-scheme: light;

  /* colour: surfaces */
  --page:#FCFBF8;      /* warm off-white page */
  --paper:#FFFFFF;     /* cards, inputs, windows */
  --sand:#F5F2EC;      /* quiet fills, image placeholders */
  --peach:#FFF2EA; --peach-2:#FFE4D4;  /* card washes behind visuals */

  /* colour: text */
  --ink:#0C0C0D;       /* headlines, buttons, strong text */
  --ink-2:#3D3D42;     /* body copy */
  --muted:#8C8A84;     /* second headline line, captions */
  --faint:#B9B6AF;     /* placeholders, disabled, strikethrough */

  /* colour: lines (the only two border colours) */
  --line:#ECE8E1; --line-2:#E2DDD4;

  /* colour: accent, one job each */
  --red:#E11D2A;       /* logo dot, ticks, focus, progress, active state */
  --red-2:#C8141F;     /* red text on light fills, error text */
  --red-wash:#FFEDE9;  /* tick discs, badges */
  --grad:linear-gradient(90deg,#ff0600 0%,#ff3500 45%,#ff8a00 100%); /* chapter headline line only */
  --soft:#FFB596;      /* second headline line on dark art */

  /* colour: status (inside product UI and forms only) */
  --ok:#15803D; --ok-wash:#E9F6EE;
  --warn:#B45309; --warn-wash:#FFF4E5;

  /* type */
  --f:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-d1:clamp(38px,4.6vw,66px);   /* hero h1 */
  --fs-d2:clamp(34px,4.2vw,60px);   /* chapter h2 */
  --fs-d3:clamp(30px,3vw,44px);     /* feature h2 */
  --fs-t1:24px;   /* big card, step title, plan name */
  --fs-t2:19px;   /* small card title, FAQ question */
  --fs-lead:clamp(17px,1.35vw,20px);
  --fs-body:17px; --fs-sm:15px; --fs-cap:13px; --fs-xs:12px;
  --lh-body:1.6; --lh-d:1.04;

  /* space: 8px grid */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --sec:clamp(96px,11vw,168px);   /* vertical padding between sections */
  --gut:32px;                     /* side gutter, 16px on phones */
  --max:1240px;                   /* content width */

  /* shape */
  --r-s:12px;     /* buttons, inputs, tiles, small controls */
  --r-m:24px;     /* cards, plans, bento, testimonials */
  --r-l:32px;     /* art frames, film */
  --r-win:16px;   /* product windows floating in a frame */
  --r-full:999px; /* pills */
  --sh-1:0 1px 2px rgba(30,20,10,.05),0 10px 30px -10px rgba(30,20,10,.12);                         /* card */
  --sh-2:0 0 0 .5px rgba(0,0,0,.10),0 2px 6px rgba(40,14,4,.08),0 40px 90px -30px rgba(80,18,4,.55); /* window over art */

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);        /* reveals, enters */
  --ease-io:cubic-bezier(.4,0,.2,1);      /* line drawing, layout */
  --ease-spring:cubic-bezier(.3,1.2,.5,1);/* knobs, toggles */
  --ease-wipe:cubic-bezier(.45,.05,.2,1); /* chart wipes */
  --t-fast:.2s; --t-ui:.35s; --t-in:.45s; --t-rv:.9s; --t-draw:1.8s;

  --focus:0 0 0 3px rgba(225,29,42,.14);
  --nav-h:76px;

  /* app (logged-in product): same family, denser */
  --a-fs:14px; --a-fs-s:13px; --a-fs-xs:11px;  /* body, secondary, caps labels */
  --a-fs-title:24px; --a-fs-num:28px;          /* page title, stat number (both Instrument Sans) */
  --a-side-w:248px; --a-top-h:56px;
  --a-ctl:36px;                                /* control height (buttons, inputs) */
  --a-r-s:9px;                                 /* controls */
  --a-r-m:14px;                                /* cards, tables, panels */
  --a-r-l:20px;                                /* modals */
  --a-row:44px;                                /* table row height */
}