/* ============================================================================
   StoreVitals landing — tokens
   `tokens.css` is a verbatim copy of the app's `atelier/api/ui/tokens.css`
   (Signal+, mvp44). The landing page reuses that palette unchanged so the
   marketing site and the product read as one thing; this file only ADDS an
   editorial scale on top. Nothing here redefines a colour the app owns.
   Keep the copy in sync when the app's tokens change — `landing/README.md`.
   ========================================================================= */
@import url("tokens.css");

:root {
  /* ---- Editorial display scale ----
     The app's --fs-2xl (31px) is a KPI value; a hero headline needs more room.
     Fluid so the 380px floor and a 1440 desktop both get a sensible size
     without a breakpoint per step. */
  --fs-hero:    clamp(34px, 3.2vw + 20px, 60px);
  --fs-section: clamp(26px, 1.6vw + 18px, 38px);
  --fs-lead:    clamp(16px, 0.5vw + 14px, 19px);
  --lh-hero: 1.08;
  --lh-section: 1.15;

  /* ---- Marketing spacing (beyond the app's --sp-8 = 64px) ---- */
  --sp-9:  96px;
  --sp-10: 128px;
  --section-y: clamp(56px, 8vw, var(--sp-10));

  /* ---- Content measure ---- */
  --measure: 1120px;
  --measure-text: 62ch;

  /* ---- Hero ground ----
     A barely-warmer plane than --surface-0 so the full-bleed screenshot's own
     cool surface-0 still separates from the page beneath it. The only new
     colour on the landing, and it exists for that one contrast. */
  --surface-editorial: #f3f5f4;
  --hero-glow: radial-gradient(60% 50% at 70% 10%,
                 color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);

  /* Screenshot frames: the app's card recipe, one step up in radius. */
  --shot-radius: 14px;
  --shot-shadow: var(--shadow-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-editorial: #061513;
    --hero-glow: radial-gradient(60% 50% at 70% 10%,
                   color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  }
}

:root[data-theme="dark"] {
  --surface-editorial: #061513;
  --hero-glow: radial-gradient(60% 50% at 70% 10%,
                 color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}