/* ============================================================================
   ZOSIMO MARKETING — theme layer
   Generated from data/zosimo-theme.tokens.json · Cairn · 2026-08-29
   Cached against published/ 2.12.2 · catalog v51

   This file is the token layer ONLY. No pattern lives here.
   Every value traces to the Figma frame 312:17907; per SOP 5.2 that frame
   carries no bound variables, so these are codified in the CHILD THEME and
   are not Origin defaults.
   ========================================================================== */

@font-face{font-family:"Geist";src:url("../fonts/Geist-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme: dark;

  /* ---- ground ---------------------------------------------------------- */
  --void:      #000000;
  --near:      #03060e;
  --card-ink:  rgba(3,4,7,.80);
  --card-veil: rgba(188,214,255,.10);
  --card-edge: rgba(188,214,255,.40);
  --hair:      rgba(255,255,255,.08);

  /* ---- the four accents ------------------------------------------------
     Peers, not a ramp. Each owns a run of panels. --accent is set per panel
     and is the ONLY thing the logo dot, the primary button, the headline
     emphasis and the ambient field read. Change it in one place, four things
     follow. */
  --pink: #fb4367;
  --sun:  #ffe47c;
  --mint: #67d2a0;
  --sky:  #00a1ff;
  --accent: var(--pink);          /* page default; every panel overrides */

  /* An accent used as a FILL BEHIND WHITE TEXT is a different value from the
     same accent used as INK. Measured 2026-08-29: white holds 4.5:1 only down
     to about luminance 0.183, and #fb4367 / #00a1ff / #67d2a0 all sit above
     it — mint at 0.51 is nowhere near. These are the darkened partners, one
     per accent, each measured to clear 4.5:1 with a white label. #ffe47c has
     no partner: sun is never a fill behind white text, it is ink only. */
  --pink-fill: #d6244a;   /* white 5.05:1 */
  --sky-fill:  #0069b8;   /* white 5.88:1 */
  --mint-fill: #2f7f5c;   /* white 5.00:1 */
  --accent-fill: var(--pink-fill);

  /* ---- ink ------------------------------------------------------------- */
  --ink:        #ffffff;
  --ink-lead:   rgba(255,255,255,.94);
  --ink-body:   rgba(255,255,255,.90);
  --ink-eyebrow:rgba(255,255,255,.78);
  --ink-list:   #f2f5fa;
  --ink-muted:  #7a879c;
  --ink-nav:    rgba(255,255,255,.85);

  /* ---- type ------------------------------------------------------------ */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", monospace;

  --fs-display:    clamp(2.25rem, 1.30rem + 4.22vw, 4rem);       /* 36 → 64 */
  --fs-card-title: clamp(1.375rem, 1.15rem + 1.00vw, 1.875rem);  /* 22 → 30 */
  --fs-lead:       clamp(1.0625rem, 1.00rem + .28vw, 1.25rem);   /* 17 → 20 */
  --fs-body:       1rem;
  --fs-body-sm:    .875rem;
  --fs-list:       .8125rem;
  --fs-price:      clamp(1.75rem, 1.40rem + 1.55vw, 2.25rem);    /* 28 → 36 */
  --fs-control:    .875rem;
  --fs-helper:     .75rem;

  --lh-display: 1.13;
  --lh-lead: 1.6;
  --ls-eyebrow: .16em;
  --ls-label:   .12em;
  --ls-control: .02em;

  /* ---- shadow ---------------------------------------------------------
     PERCEPTUAL ONLY. Never counted toward a published contrast ratio — the
     harness hides the text to sample, which hides the shadow with it. */
  --sh-heading: 0 10px 48px rgba(3,6,14,.85), 0 1px 2px rgba(3,6,14,.70);
  --sh-lead:    0 6px 28px rgba(3,6,14,.70), 0 1px 2px rgba(3,6,14,.50);

  /* ---- controls -------------------------------------------------------- */
  --ctl-radius: 3px;
  --ctl-pad-x: 24px;
  --ctl-pad-y: 10px;
  --ctl-stroke: rgba(255,255,255,.30);

  /* ---- surfaces -------------------------------------------------------- */
  --card-pad: 22px;
  --field-fill: rgba(255,255,255,.10);
  --field-stroke: rgba(255,255,255,.30);
  --field-stroke-active: rgba(255,255,255,.65);   /* Lisa 2026-08-29 */

  /* ---- layout ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 1.5rem + 5.6vw, 7.5rem);   /* 20 → 120 */
  --col-max: 1200px;
  --hdr-h: 80px;

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --build-step: 70ms;
  --build-dur: 620ms;
  --build-rise: 22px;
}

/* Per-panel accent binding. One selector, four values, everything downstream
   reads var(--accent). */
[data-accent="pink"]{ --accent: var(--pink); --accent-fill: var(--pink-fill) }
[data-accent="sun"] { --accent: var(--sun);  --accent-fill: var(--pink-fill) }
[data-accent="mint"]{ --accent: var(--mint); --accent-fill: var(--mint-fill) }
[data-accent="sky"] { --accent: var(--sky);  --accent-fill: var(--sky-fill)  }

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; background:var(--void) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:400; letter-spacing:0 }
p{ margin:0 }
a{ color:inherit }
img,svg,video{ max-width:100%; display:block }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--void); padding:.6rem 1rem;
  font-family:var(--mono); font-size:var(--fs-control);
}
.skip:focus{ left:.5rem; top:.5rem }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}