/* =====================================================================
   Screenmotive design tokens: THE single place to change the look.
   Source: brand/v2/brand-system-v2.md (approved art direction, replaces v0.1).
   Fonts are self-hosted OFL builds: Fraunces (display, static instance
   opsz 144 · SOFT 50 · WONK 0 · 400) and Inter (UI/body, variable 400–700).
   site.css only consumes these variables.
   ===================================================================== */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-Display.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-Var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* colour */
  --bg:#FFFFFF; --surface:#F5F5F7; --surface-2:#EBEBEF;
  --stage-top:#FAFAFB; --stage-bottom:#ECECF0;
  --stage:radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--stage-top) 40%, var(--stage-bottom) 100%);
  --night:#0C0C0E; --night-2:#1C1C1F;
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B; --ink-body:#3A3A3C;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.05); --line-strong:#D2D2D7;
  --ember:#F0522B; --ember-press:#D63F16; --ember-tint:#FFF1EB;
  --ok:#1F9D55;

  /* type */
  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-hero:clamp(42px, 5.4vw, 80px);      /* 76/78 desktop, 40–44 mobile */
  --fs-section:clamp(34px, 3.7vw, 54px);   /* 52/55 */
  --fs-close:clamp(40px, 4.6vw, 66px);     /* 64/66 */
  --fs-price:clamp(52px, 4.6vw, 64px);
  --fs-lede:clamp(16px, 1.3vw, 19px);
  --fs-body:17px; --fs-card-title:17px; --fs-small:14px; --fs-ui:13px;
  --track-display:-0.025em;

  /* layout + spacing (4-pt) */
  --container:1120px; --container-stage:1240px; --gutter:20px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:96px; --s-12:144px;
  --section-y:clamp(96px, 10vw, 144px);
  --nav-h:56px;

  /* radius */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:36px; --r-pill:999px;

  /* shadow */
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --sh-2:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --sh-device:0 2px 4px rgba(0,0,0,.06), 0 18px 40px -8px rgba(0,0,0,.18), 0 50px 90px -30px rgba(0,0,0,.22);

  /* motion */
  --ease-settle:cubic-bezier(.22,1,.36,1); --ease-standard:cubic-bezier(.25,.1,.25,1); --ease-glide:cubic-bezier(.65,0,.35,1);
  --dur-press:150ms; --dur-state:220ms; --dur-settle:600ms; --dur-glide:1000ms;
}
@media (min-width:720px){ :root{ --gutter:32px; } }