/* ==========================================================================
   Unclamped design tokens · night theme only
   Brand name lives in ONE place: --brand-name below (and BRAND in site/app.js,
   which reads it). Change it there; nothing else hard-codes the name.
   ========================================================================== */

@font-face{font-family:"Archivo SC";src:url("assets/archivo-sc.woff2") format("woff2");font-weight:700 900;font-stretch:62% 87.5%;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/inter-sub.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* metric-matched fallbacks keep CLS near zero while webfonts swap in */
@font-face{font-family:"Archivo SC fallback";src:local("Arial Narrow Bold"),local("Arial Bold"),local("Liberation Sans Bold"),local("Arial");size-adjust:92%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Inter fallback";src:local("Arial"),local("Liberation Sans");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --brand-name:"Unclamped";             /* confirmed brand name, single source */

  /* ---- raw palette ---------------------------------------------------- */
  --c-tarmac:#1C1C1E;      /* base surface */
  --c-tarmac-deep:#111113; /* vignette / sheets */
  --c-tarmac-glass:#2A2A2E;/* cards (solid equivalent of the glass) */
  --c-sheen:#4A4A4E;       /* wet highlight, brightest a scrimmed photo may get behind text */
  --c-yellow:#FFD400;      /* double-yellow line paint */
  --c-yellow-press:#E9C200;
  --c-yellow-glow:rgba(255,212,0,.35);
  --c-offwhite:#F2EFE8;    /* road-marking white, used for text */
  --c-gravel:#A3A3A8;      /* secondary text */
  --c-paper:#F7F5EF;       /* letter paper: the ONLY light surface */
  --c-ink:#1C1C1E;         /* text on paper and on yellow */
  --c-red:#FF7A6E;         /* error on dark */
  --c-green:#5FD08B;       /* success on dark */

  /* ---- semantic ------------------------------------------------------- */
  --bg:var(--c-tarmac);
  --bg-deep:var(--c-tarmac-deep);
  --surface-glass:rgba(28,28,30,.62);
  --surface-glass-strong:rgba(20,20,22,.82);
  --surface-selected:rgba(255,212,0,.10);
  --border-glass:rgba(242,239,232,.14);
  --border-strong:rgba(242,239,232,.32);
  --text:var(--c-offwhite);
  --text-muted:var(--c-gravel);
  --text-accent:var(--c-yellow);
  --text-on-accent:var(--c-ink);
  --text-on-paper:var(--c-ink);
  --accent:var(--c-yellow);
  --accent-press:var(--c-yellow-press);
  --focus:var(--c-yellow);
  --danger:var(--c-red);
  --success:var(--c-green);
  --scrim:linear-gradient(180deg,rgba(17,17,19,.25),rgba(17,17,19,.55) 60%,rgba(17,17,19,.85));
  --vignette:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.72) 100%);

  /* ---- type ----------------------------------------------------------- */
  --font-display:"Archivo SC","Archivo SC fallback",system-ui,sans-serif; /* heavy semi-condensed grotesque, sentence case */
  --font-body:"Inter","Inter fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-letter:Georgia,"Times New Roman",Times,serif;                     /* the appeal letter only */
  --fw-display:800; --stretch-hero:66%; --stretch-display:80%; --fw-black:900; --fw-body:400; --fw-medium:500; --fw-semibold:600;
  --tracking-display:-0.025em;
  --lh-display:.9; --lh-heading:1.05; --lh-body:1.5;

  --fs-hero:min(28.5vw,13.2svh);           /* hero headline (phone); fitted in JS via --fit, desktop overrides */
  --fs-h1:clamp(2.5rem,10vw,4rem);       /* step questions */
  --fs-h2:clamp(1.75rem,6.5vw,2.5rem);
  --fs-h3:1.375rem;
  --fs-lead:clamp(1.375rem,5.6vw,1.75rem);
  --fs-body:1.0625rem;  /* 17px: comfortable for stressed thumbs */
  --fs-small:.9375rem;
  --fs-micro:.8125rem;
  --fs-button:1.25rem;

  /* ---- space (4px base) ---------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --gutter:clamp(20px,6vw,40px);
  --tap-min:48px;

  /* ---- shape & depth (soft, photographic; no hard offset shadows) ----- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --shadow-card:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-pill:0 12px 28px rgba(0,0,0,.55),0 0 22px rgba(255,212,0,.10),inset 0 -3px 0 rgba(0,0,0,.14);
  --shadow-paper:0 24px 60px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --blur-glass:14px;
  --blur-rain:7px;

  /* ---- road markings -------------------------------------------------- */
  --line-width:11px;       /* each yellow line at 390px */
  --line-gap:12px;
  --line-wear:url("assets/worn.webp");
  --chevron:var(--c-offwhite);

  /* ---- layout --------------------------------------------------------- */
  --col-4:4; --col-8:8; --col-12:12;
  --bp-tablet:640px; --bp-desktop:1024px;
  --content-max:480px;      /* phone-first column, even on desktop */
  --wide-max:1200px;

  --z-bg:0; --z-lines:1; --z-content:10; --z-wiper:20; --z-chrome:40; --z-toast:60; --z-egg:80;

  /* ---- motion --------------------------------------------------------- */
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:260ms; --dur-slow:420ms;
  --dur-paint:700ms; --dur-drama:1200ms; --dur-intro:3200ms; --dur-wipe:1400ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-paint:cubic-bezier(.6,.05,.25,1);
  --ease-squish:cubic-bezier(.34,1.56,.64,1);
  --ease-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.106,1.101 28.5%,1.026 37.1%,.996 42%,.983 47.5%,1.001 62.4%,1);
  --ease-wiper:cubic-bezier(.45,.05,.3,1);
  --stagger-letter:55ms; --stagger-item:60ms;
  --press-scale:.94;          /* squish */
  --wobble-deg:2.5deg;
}

/* reduced motion: OS setting OR manual override (data-motion="reduce" on <html>) */
@media (prefers-reduced-motion: reduce){
  :root{--dur-fast:1ms;--dur-base:120ms;--dur-slow:120ms;--dur-paint:1ms;--dur-drama:1ms;--dur-intro:1ms;--dur-wipe:240ms;--stagger-letter:0ms;--stagger-item:0ms;--press-scale:1;--wobble-deg:0deg}
}
:root[data-motion="reduce"]{--dur-fast:1ms;--dur-base:120ms;--dur-slow:120ms;--dur-paint:1ms;--dur-drama:1ms;--dur-intro:1ms;--dur-wipe:240ms;--stagger-letter:0ms;--stagger-item:0ms;--press-scale:1;--wobble-deg:0deg}