/* zeroto1 design tokens v1.0.0 — generated by brand/tokens/build_tokens.py from zt1.tokens.json. Do not edit; edit the JSON.
   Paper is the environment. Ink is the voice. Film is the proof. */
:root{
  --paper-hi: #FFE93B;
  --paper: #F7DC14;
  --paper-low: #EDCE06;
  --paper-deep: #E0BE00;
  --paper-dusk: #C7A404;
  --paper-loader: #F5DB12;
  --amber: #9C7E03;
  --amber-deep: #7A3A05;
  --ink: #171204;
  --ink-80: rgba(23,18,4,.8);
  --ink-60: rgba(23,18,4,.62);
  --ink-40: rgba(23,18,4,.4);
  --ink-25: rgba(23,18,4,.25);
  --ink-14: rgba(23,18,4,.14);
  --ink-08: rgba(23,18,4,.08);
  --film: #0D0B06;
  --film-2: #171208;
  --tungsten: #FFB846;
  --tungsten-2: #FFDD7A;
  --tungsten-16: rgba(255,184,70,.16);
  --signal: #FFEB00;
  --signal-85: rgba(255,235,0,.85);
  --signal-80: rgba(255,235,0,.8);
  --signal-50: rgba(255,235,0,.5);
  --signal-16: rgba(255,235,0,.16);
  --accent-halo: #1E3D8F;
  --white-55: rgba(255,255,255,.55);
  --white-20: rgba(255,255,255,.2);
  --font-display: "Mona Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Libre Caslon Text", Georgia, serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fragment Mono", "Courier New", monospace;
  --font-weight-display: 640;
  --font-weight-display-heavy: 780;
  --font-weight-display-soft: 520;
  --font-weight-quote: 560;
  --font-weight-numeral: 610;
  --font-weight-ui: 600;
  --font-weight-ui-strong: 700;
  --font-weight-text: 400;
  --font-stretch-display: 112%;
  --font-stretch-numeral: 108%;
  --font-stretch-quote: 106%;
  --font-stretch-soft: 104%;
  --font-tracking-display: -0.03em;
  --font-tracking-display-hero: -0.032em;
  --font-tracking-display-heavy: -0.036em;
  --font-tracking-display-soft: -0.018em;
  --font-tracking-quote: -0.022em;
  --font-tracking-swash: -0.01em;
  --font-tracking-label: .1em;
  --font-tracking-label-wide: .14em;
  --font-tracking-label-mono: .12em;
  --font-tracking-label-tight: .08em;
  --font-tracking-motto: .16em;
  --type-body: 17px;
  --type-body-lh: 1.55;
  --type-d1: clamp(2.9rem, 6vw, 5.35rem);
  --type-d2: clamp(2.15rem, 4.1vw, 3.8rem);
  --type-d3: clamp(1.55rem, 2.4vw, 2.2rem);
  --type-d1-lh: 1.0;
  --type-d2-lh: 1.04;
  --type-d3-lh: 1.12;
  --type-quote: clamp(1.35rem, 2.35vw, 2.15rem);
  --type-stat: clamp(3.2rem, 6.5vw, 6rem);
  --type-numeral: clamp(2rem, 2.95vw, 2.95rem);
  --type-name: 1.3rem;
  --type-essay: 1.16rem;
  --type-essay-lh: 1.72;
  --type-prose: 1.02rem;
  --type-prose-lh: 1.62;
  --type-caption: .95rem;
  --type-small: .92rem;
  --type-foot: .8rem;
  --type-label: .84rem;
  --type-label-sm: .76rem;
  --type-label-xs: .72rem;
  --type-label-xxs: .66rem;
  --type-label-floor: 11px;
  --type-dropcap: 3.9em;
  --size-measure: min(1360px, 100vw - 8rem);
  --size-measure-md: min(1360px, 100vw - 4rem);
  --size-measure-sm: min(1360px, 100vw - 2.5rem);
  --size-prose-measure: 66ch;
  --size-card-measure: 60ch;
  --size-bp-lg: 1080px;
  --size-bp-md: 900px;
  --size-bp-sm: 760px;
  --size-bp-xs: 700px;
  --size-control: 44px;
  --size-control-sm: 36px;
  --size-row: 48px;
  --size-stamp: 52px;
  --size-thumb: 172px;
  --size-cta-mark: 240px;
  --space-section: clamp(3rem, 6vw, 5.5rem);
  --space-section-sm: clamp(2.4rem, 4vw, 3.6rem);
  --space-head-gap: clamp(2.6rem, 5vw, 4.2rem);
  --space-card: clamp(1.4rem, 2.4vw, 2.2rem);
  --space-card-lg: clamp(1.8rem, 3.4vw, 3.4rem);
  --space-card-xl: clamp(2rem, 4.5vw, 4.4rem);
  --space-gap: clamp(1.2rem, 2.2vw, 2rem);
  --space-gap-lg: clamp(2rem, 4vw, 3.6rem);
  --space-gap-xl: clamp(2.5rem, 5vw, 5rem);
  --space-row: 1.7rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .8rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.6rem;
  --space-7: 2.2rem;
  --space-8: 3rem;
  --border-rule: 1px solid var(--ink);
  --border-hair: 1px solid var(--ink-25);
  --border-heavy: 2px solid var(--ink);
  --border-heavier: 2.5px solid var(--ink);
  --border-button: 1.5px solid var(--ink);
  --border-frame: 1px dashed var(--ink-25);
  --border-radius: 0;
  --border-radius-chip: 2px;
  --border-radius-pill: 999px;
  --border-radius-focus: 1px;
  --shadow-button: 0 8px 20px -12px rgba(23,18,4,.55);
  --shadow-button-hover: 0 12px 26px -10px rgba(23,18,4,.6);
  --shadow-button-active: 0 3px 10px -6px rgba(23,18,4,.6);
  --shadow-card: 0 20px 44px -30px rgba(23,18,4,.55);
  --shadow-card-deep: 0 40px 80px -50px rgba(23,18,4,.65);
  --shadow-plate: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.8), 0 12px 24px -18px rgba(0,0,0,.6);
  --grain-paper-frequency: 0.9;
  --grain-paper-opacity: 0.07;
  --grain-paper-blend: multiply;
  --grain-paper-tile: 240px;
  --grain-film-frequency: 0.75;
  --grain-film-opacity: 0.14;
  --grain-film-blend: screen;
  --grain-film-tile: 180px;
  --grain-octaves: 2;
  --motion-ease-out: cubic-bezier(.16,1,.3,1);
  --motion-ease-inout: cubic-bezier(.87,0,.13,1);
  --motion-ease-wipe: cubic-bezier(.7,0,.2,1);
  --motion-ease-draw: cubic-bezier(.45,0,.55,1);
  --motion-fast: 180ms;
  --motion-reveal: 750ms;
  --motion-wipe: 450ms;
  --motion-draw: 2100ms;
  --motion-develop: 1300ms;
  --motion-rise: 24px;
  --motion-stagger: 60ms;
  --motion-loader-fps: 4;
  --motion-loader-min: 1000ms;
  --motion-loader-max: 3000ms;
  /* homepage aliases (index_type_b.html uses these names) */
  --serif: var(--font-display);
  --serif-text: var(--font-text);
  --grot: var(--font-ui);
  --mono: var(--font-mono);
  --w: var(--size-measure);
  --rule: var(--border-rule);
  --hair: var(--border-hair);
}
@media (max-width: 1080px){ :root{ --size-measure: min(1360px, 100vw - 4rem); } }
@media (max-width: 760px){ :root{ --size-measure: min(1360px, 100vw - 2.5rem); --type-body: 16px; } }

/* semantic — components reference only these */
:root, [data-theme="paper"]{
  --bg: var(--paper);
  --bg-hi: var(--paper-hi);
  --bg-low: var(--paper-low);
  --bg-deep: var(--paper-deep);
  --bg-raised: var(--white-20);
  --bg-wash: var(--ink-08);
  --bg-hover: var(--ink-14);
  --fg: var(--ink);
  --fg-muted: var(--ink-80);
  --fg-faint: var(--ink-60);
  --fg-label: var(--ink-60);
  --fg-quiet: var(--ink-40);
  --fg-inverse: var(--paper);
  --border: var(--ink);
  --border-hair: var(--ink-25);
  --accent: var(--ink);
  --accent-fg: var(--paper);
  --accent-2: var(--accent-halo);
  --danger: var(--amber-deep);
  --focus: var(--ink);
  --selection-bg: var(--ink);
  --selection-fg: var(--paper);
  --grain-opacity: var(--grain-paper-opacity);
  --grain-blend: var(--grain-paper-blend);
}
[data-theme="film"]{
  --bg: var(--film);
  --bg-hi: var(--film-2);
  --bg-low: #0A0804;
  --bg-deep: #000000;
  --bg-raised: var(--film-2);
  --bg-wash: rgba(255,235,0,.06);
  --bg-hover: rgba(255,235,0,.1);
  --fg: var(--paper);
  --fg-muted: rgba(247,220,20,.78);
  --fg-faint: rgba(247,220,20,.6);
  --fg-label: var(--signal-80);
  --fg-quiet: rgba(247,220,20,.38);
  --fg-inverse: var(--film);
  --border: var(--signal-50);
  --border-hair: var(--signal-16);
  --accent: var(--paper);
  --accent-fg: var(--film);
  --accent-2: var(--tungsten);
  --danger: var(--tungsten);
  --focus: var(--signal);
  --selection-bg: var(--paper);
  --selection-fg: var(--film);
  --grain-opacity: var(--grain-film-opacity);
  --grain-blend: var(--grain-film-blend);
}

/* density */
:root, [data-density="default"]{
  --dn-body: var(--type-body);
  --dn-body-lh: var(--type-body-lh);
  --dn-label: var(--type-label-sm);
  --dn-control: var(--size-control);
  --dn-row: var(--size-row);
  --dn-row-pad: .9rem;
  --dn-card: var(--space-card);
  --dn-gap: var(--space-gap);
  --dn-control-pad: 1.02rem 1.6rem;
}
[data-density="dense"]{
  --dn-body: 14px;
  --dn-body-lh: 1.45;
  --dn-label: 11px;
  --dn-control: 32px;
  --dn-row: 36px;
  --dn-row-pad: .55rem;
  --dn-card: 1rem;
  --dn-gap: .8rem;
  --dn-control-pad: .5rem .9rem;
}

/* the ground: paper is never one flat hex */
[data-theme="paper"], :root:not([data-theme="film"]) body{
  background:
    radial-gradient(120% 90% at 50% -10%, var(--paper-hi) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 115%, var(--paper-dusk) 0%, transparent 46%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper) 46%, var(--paper-low) 100%);
  background-color: var(--bg); color: var(--fg);
}
[data-theme="film"] body, [data-theme="film"]{
  background: radial-gradient(120% 100% at 80% 0%, var(--tungsten-16), transparent 55%), var(--film);
  background-color: var(--bg); color: var(--fg);
}