/* Archetypes design tokens. Source of truth: docs/brand/system.md */
:root {
  /* Colour */
  --page: #ffffff;
  --page-warm: #fbfaf7;            /* warm direction test only */
  --ink: #111417;                  /* 18.5:1 on white */
  --ink-2: #5b6166;                /* 6.3:1, secondary text */
  --ink-3: #70777d;                /* 4.5:1 on white, captions 13px and up only */
  --line: #e4e7ea;                 /* hairlines, frames, chart tracks */
  --hover: #eef1f4;                /* r12: the hover fill on every control, ink's own scale; sky-air read as a colour, not a state (shade B, 24 Oct) */
  --pressed: #e3e7eb;              /* r12: pressed, one step darker; both lighter than the hairline */
  --sky-air: #eff9fd;              /* pale scale: small worlds, chips, "simulated" fills */
  --sky-light: #def2fc;
  --sky-pale: #cbeafb;
  --sky-mid: #a5d9f9;              /* deep scale: hero and full portals, 600px and wider */
  --sky-deep: #7bc8f6;
  --positive: #2f7d4f;
  --negative: #b8432f;
  --warning: #a4720e;              /* a mark, 4.2:1 on white; it does not carry text */
  --warning-text: #8c610c;         /* r12: the warning as text, 5.5:1 on white */

  /* Type */
  --serif: "Gambetta", Georgia, "Times New Roman", serif;
  --sans: "Switzer", system-ui, sans-serif;
  --w-display: 400;
  --display: 64px;   --display-lh: 1.0;   --display-ls: -0.02em;   /* r10: 32 / 36 / 40 / 48 / 56 / 64 at 360 / 480 / 768 / 1024 / 1280 / 1440 */
  --statement: 56px; --statement-lh: 1.05; --statement-ls: -0.015em;
  --h3: 32px;        --h3-lh: 1.15;       --h3-ls: -0.01em;
  --quote: 24px;     --quote-lh: 1.35;
  --lead: 22px;      --lead-lh: 1.35;
  --body: 17px;      --body-lh: 1.6;
  --ui: 15px;        --ui-lh: 1.5;
  --label: 13px;     --label-lh: 1.4;
  --num-large: 72px; --num-ls: -0.01em;
  --num-features: "tnum" 1, "lnum" 1;

  /* Spacing, base 4. Each step has a job; see the system. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px;
  --s8: 48px; --s9: 64px; --s10: 80px; --s11: 120px; --s12: 160px; --s13: 200px; --s14: 240px;
  --section: var(--s11);
  --section-wide: var(--s12);
  --statement-space: var(--s13);
  --interval: var(--s14);

  /* Grid */
  --margin: 160px;                 /* r10: 16 / 20 / 40 / 80 / 140 / 160 / 240 / 320 at 360 / 480 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 */
  --columns: 12;
  --gutter: 12px;
  --content-max: 1120px;           /* r8: 1360 at 1920 and above */

  /* Surface */
  --radius: 0px;
  --border: 1px solid var(--line);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-data: cubic-bezier(0.2, 0.9, 0.3, 1);
  --t1: 160ms; --t2: 320ms; --t3: 640ms; --t-data: 1200ms;
  --stagger: 60ms;

  /* Device and data */
  --mark: 10px;                    /* r10: a persona mark in openings 600 and wider; 8 in small worlds (--mark-world); the phone's 5 is withdrawn */
  --pitch: 32px;                   /* r8: lattice pitch at mark 10 */
  --list-pitch: 44px;              /* r11: a list of titles at the quote size (the home selector), baseline to baseline */
  --blue: #2b7cc1;                 /* r8: the data colour: simulated series, tally fills, the active cell; 4.4:1 on white; never text */
  --blue-fill: #cbeafb;            /* r8: area fills under a blue curve (sky-pale) */
  /* r12: the concept ramp, from the answer's blue down to sky-mid in eight even OKLab steps; concepts are ranked on it,
     the answer the deepest, and an A/B chart draws A on --ramp-5 */
  --ramp-1: #2b7cc1; --ramp-2: #3f89c9; --ramp-3: #5096d1; --ramp-4: #62a4d9;
  --ramp-5: #73b1e1; --ramp-6: #83bee9; --ramp-7: #94ccf1; --ramp-8: #a5d9f9;
  --data-compare: var(--ramp-5);   /* the compared concept (headline A beside B); the home and use case pages keep ink-2 */
  --tick: 2px; --tick-period: 6px; /* tally bars */
  --bar: 8px; --bar-gap: 4px;
  --icon-stroke: 1.5px;

  /* r6 */
  --nav-cap: 18px;                 /* lockup cap height in the nav; file height = 2.47 * cap, pulled 0.5 * cap left */
  --fold-max: 0.72;                /* hero visual height as a share of the viewport height, 1280 and up */
  --footer-crop: 112 / 146.97;     /* r7: the wordmark baseline on the page edge from 768 up; the whole lockup with 24px of air under 768 */
  --ink-hover: #24292e;
  --parallax-far: 0.6; --parallax-mid: 0.8; --parallax-near: 1;
  /* r8: the door's light is a reflection of its own sky; the grey shadow is withdrawn */
  --light-skew: 20deg; --light-reach: 0.4; --light-near: 0.6; --light-far-reach: 0.7; --light-far: 0.45; --light-blur: 22px;   /* r9: round seven's option B; no sill */
  --drift-far: 8px; --drift-mid: 10px; --drift-near: 12px; --drift-far-t: 16s; --drift-mid-t: 12s; --drift-near-t: 9s;   /* r9: marks crossing the hero door */
  --curve-stroke: var(--ink); --curve-fill: var(--sky-light);   /* r9: every distribution: ink line, lighter fill; the mean tick and interval stay blue */
  --mark-world: 8px;               /* r10: marks inside small worlds, every one the unit; 10 in openings 600 and wider, 12 where a brief asks */
  --word-hold: 2800ms;             /* r7: the hero's rotating word: launch, price, scale, announce */
  --radius-round: 8px;             /* Cast direction only */
}
/* Product UI (r12, 14 Oct 2026): the app's semantic tokens, every one an alias of a value above, so the app and the
   site cannot drift; dark mode, when it comes, changes these aliases and nothing in the app. Light only at launch.
   The sheet: web/product.html. */
:root {
  --surface: var(--page);                      /* the one surface; depth comes from lines and position, never a fill or a shadow */
  --surface-sunken: var(--hover);              /* a disabled input; a highlighted column keeps sky-air, since that fill means data */
  --surface-hover: var(--hover);               /* hover on chips, rows, tabs and the secondary button */
  --surface-pressed: var(--pressed);
  --surface-inverse: var(--ink);               /* the primary button, the selected tab */
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --text-inverse: var(--page);
  --text-disabled: rgba(17, 20, 23, 0.4);      /* 2.6:1, exempt under AA; never on a control that can act */
  --line-rest: var(--line); --line-hover: var(--ink-2); --line-active: var(--ink); --line-selected: var(--ink); --line-error: var(--negative);
  --focus: 2px solid var(--ink);               /* the ring: 3 px outside a control, 2 px inside a row */
  --focus-halo: 0 0 0 2px var(--sky-pale);     /* the input's second ring */
  --status-positive: var(--positive); --status-negative: var(--negative); --status-warning: var(--warning);   /* outside the blue family; the warning is a mark (4.2:1) and does not carry text */
  --status-warning-text: var(--warning-text);  /* the warning as text (5.5:1) */
  --data: var(--blue); --data-fill: var(--blue-fill); --data-track: var(--line);   /* the answer, the area under its curve, the meter's line */
  --data-2: var(--ink); --data-3: var(--ink-2); --data-4: var(--ink-3);             /* the other concepts, by rank */
  --control: 48px; --control-sm: 32px; --row: 48px; --target: 44px;
  --label-gap: var(--s2); --field-gap: var(--s5); --group-gap: var(--s7); --screen-pad: var(--s5);
  --z-sticky: 2; --z-nav: 10; --z-menu: 20; --z-dialog: 30; --z-toast: 40;
  /* the loader (kit/applications/loading.html) */
  --loader-ground: var(--surface);
  --loader-size: var(--s10);
  --loader-delay: 640ms;   /* t3's value, but not t3: reduced motion zeroes the durations, and this is a threshold */
  --loader-in: var(--t2);
  --loader-out: var(--t3);
}
@media (max-width: 767px) { :root { --screen-pad: var(--s4); } }
/* Steps (r10, section 19): 360, 480, 768, 1024, 1280, 1440 (the base above), 1920, 2560. A step runs from its width to
   the next one; the 360 step also holds anything narrower. */
@media (max-width: 1023px) { :root { --margin: 40px; --display: 40px; --statement: 34px; --h3: 26px; --lead: 17px; --num-large: 40px; --section: 60px; --section-wide: 80px; --statement-space: 100px; --interval: 120px; } }
@media (max-width: 767px) { :root { --columns: 6; --margin: 20px; --display: 36px; } }
/* 360: display 32, margins 16. The statement steps to 30 with it, so it stays under the display; the markets
   statement holds two lines from 375 ("Any market you can name," is 339 px at 30) and takes three at 360. */
@media (max-width: 479px) { :root { --margin: 16px; --display: 32px; --statement: 30px; } }
@media (min-width: 1024px) and (max-width: 1279px) { :root { --margin: 80px; --display: 48px; --statement: 44px; --h3: 28px; --lead: 18px; --num-large: 48px; } }
@media (min-width: 1280px) and (max-width: 1439px) { :root { --margin: 140px; --display: 56px; --statement: 50px; --h3: 30px; --lead: 20px; --num-large: 56px; } }
@media (min-width: 1920px) { :root { --margin: 240px; --content-max: 1360px; } }
@media (min-width: 2560px) { :root { --margin: 320px; } }
@media (prefers-reduced-motion: reduce) { :root { --t1: 0ms; --t2: 0ms; --t3: 0ms; --t-data: 0ms; --stagger: 0ms; } }