/* Style F "Swiss Candy" — tokens from docs/design-tokens.md. Font: Manrope (Anna 14.10).
   Coral only with dark text (--stl-on-coral). White on accent. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --stl-bg:#F4EFFF; --stl-surface:#FFFFFF; --stl-text:#1B1340; --stl-text-muted:#5E5880;
  --stl-accent:#6C3BFF; --stl-accent-hover:#5A2BE0; --stl-on-accent:#FFFFFF;
  --stl-coral:#FF6B5A; --stl-on-coral:#1B1340; --stl-coral-text:#B23A2E;
  --stl-border:#E9E1FB; --stl-border-strong:#847AB0; --stl-focus:#1B1340;
  --stl-font:"Manrope",system-ui,sans-serif;
  --stl-r-sm:6px; --stl-r-md:16px; --stl-r-lg:24px; --stl-r-full:999px;
  --stl-small-color:rgba(27,19,64,.7);

  /* 4 text styles + display (docs/site-v5-film-spec.md), desktop values */
  --t-h1:800 88px/1.0 var(--stl-font);
  --t-h2:700 56px/1.05 var(--stl-font);
  --t-body:400 20px/1.45 var(--stl-font);
  --t-small:400 14px/1.4 var(--stl-font);
  --t-display:800 120px/1 var(--stl-font);
  --sp-hb:24px; --sp-bs:16px; --sp-btn:32px;
  --gutter:96px;
}
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  :root {
    --t-h1:800 44px/1.05 var(--stl-font);
    --t-h2:700 34px/1.1 var(--stl-font);
    --t-body:400 17px/1.45 var(--stl-font);
    --t-small:400 13px/1.4 var(--stl-font);
    --t-display:800 72px/1 var(--stl-font);
    --sp-hb:20px; --sp-bs:12px; --sp-btn:24px;
    --gutter:20px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) and (min-aspect-ratio: 4/5) { :root { --gutter:56px; } }