/* ==========================================================================
   Abby Cummings, design tokens
   "The Headliner" system. Two surfaces:
     Stage   = dark, fan-facing, photography first
     Program = light paper, buyer-facing, reading and forms
   Change brand values here only. Components read these variables.
   ========================================================================== */

/* ---- Self-hosted fonts (latin subset, swap to avoid invisible text) ---- */
@font-face{font-family:"League Gothic";src:url("/assets/fonts/league-gothic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/assets/fonts/bodoni-moda-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* Metric-adjusted fallback so the marquee type doesn't jump when the font arrives */
@font-face{font-family:"League Gothic Fallback";src:local("Arial Narrow"),local("Arial");size-adjust:78%;ascent-override:118%;descent-override:30%}

:root{
  /* Brand palette (from Abby: plum lip, platinum hair, gold lamé) */
  --c-house:#120D10;      /* Stage background */
  --c-house-2:#1C1418;    /* Raised stage surface */
  --c-velvet:#4E1428;     /* The lipstick: accents on light surfaces */
  --c-velvet-2:#6A1D37;   /* Velvet hover */
  --c-platinum:#EEE7DD;   /* Text on dark */
  --c-paper:#F7F2EB;      /* Program background */
  --c-paper-2:#EFE7DC;    /* Program raised / field fill */
  --c-lame:#C9A052;       /* Gold: primary CTA on dark only */
  --c-lame-2:#D8B368;     /* Gold hover */
  --c-spotlight:#F3B7C3;  /* Blush: links on dark, used sparingly */
  --c-ink:#1E1519;        /* Text on light */
  --c-mute-dark:#A8989D;  /* Secondary text on dark */
  --c-mute-light:#65565B; /* Secondary text on light (AA on paper) */
  --c-rule-dark:rgba(238,231,221,.14);
  --c-rule-light:rgba(30,21,25,.16);
  --c-error:#A3243B;      /* Errors on light (AA) */
  --c-error-dark:#FF9DAE; /* Errors on dark */
  --c-success:#2E6B3A;

  /* Type */
  --f-marquee:"League Gothic","League Gothic Fallback","Arial Narrow",Impact,sans-serif;
  --f-aside:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;

  /* Fluid type scale */
  --t-name:clamp(5rem,19vw,16rem);
  --t-h1:clamp(3.25rem,10vw,7.5rem);
  --t-h2:clamp(2.5rem,6vw,4.75rem);
  --t-h3:clamp(1.6rem,3vw,2.2rem);
  --t-lede:clamp(1.125rem,1.6vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.875rem;
  --t-label:.75rem;

  /* Spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --section:clamp(64px,10vw,144px);
  --gutter:clamp(16px,4vw,48px);
  --wrap:1180px;

  /* Shape and motion */
  --radius:2px;
  --tap:52px;                         /* minimum control height */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.6s;
  --header-h:72px;
}