/* =============================================================================
   Cursafosca - tokens.css · THE DESIGN SYSTEM
   Every visual decision of the site lives here as a custom property. site.css
   only ever reads these; it never hard-codes a colour, a size, a weight, a
   tracking value or a duration. Change a value here and every page follows.
   The living styleguide at /ds/ renders this file - open it to see the effect.

   Sections: 1 Fonts · 2 Colour · 3 Type · 4 Space & layout · 5 Shape · 6 Motion
   Mirror by hand (they load before CSS): <meta name="theme-color"> in every
   page and "theme_color"/"background_color" in manifest.webmanifest = --ink.
   ========================================================================== */

/* 1 ── Fonts ─────────────────────────────────────────────────────────────── */

/* Averta Std is the brand face (commercial licence; files supplied by the
   organisation, kept out of git). The site renders correctly without them:
   Figtree carries the same metrics thanks to the overrides below, so the swap
   costs no layout shift. To change the brand face: add its @font-face rules
   here and put the family first in --font-body / --font-display. */
@font-face {
  font-family: "Averta Std";
  src: url("/fonts/averta-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  ascent-override: 78.5%;
  descent-override: 21.5%;
  line-gap-override: 23.5%;
}
@font-face {
  font-family: "Averta Std";
  src: url("/fonts/averta-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 78.5%;
  descent-override: 21.5%;
  line-gap-override: 23.5%;
}
@font-face {
  font-family: "Averta Std";
  src: url("/fonts/averta-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 78.5%;
  descent-override: 21.5%;
  line-gap-override: 23.5%;
}
@font-face {
  font-family: "Averta Std";
  src: url("/fonts/averta-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 78.5%;
  descent-override: 21.5%;
  line-gap-override: 23.5%;
}

/* Shipped fallback: one variable file covers 300–900. */
@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 103.7%;
  ascent-override: 78.5%;
  descent-override: 21.5%;
  line-gap-override: 23.5%;
}


/* Handwritten voice for campaign pieces (social kickers, notes, the price
   line): Nanum Pen Script, OFL, subset to latin + punctuation. Never body copy. */
@font-face {
  font-family: "Nanum Pen Script";
  src: url("/fonts/nanum-pen-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2 ── Colour ────────────────────────────────────────────────────────────── */

:root {
  /* Three roles only: ink (ground), text (voice), accent (the one action). */
  --ink: #050609;
  --ink-2: #0a0c14;
  --text: #eceaf4;
  --text-dim: #9aa0b8;
  --rule: rgb(236 234 244 / 12%);
  --rule-strong: rgb(236 234 244 / 26%);
  --accent: #a2a3e9;
  --on-accent: #050609;

  /* Dusk lives in the hero sky and in one hairline horizon. Nowhere else. */
  --dusk-0: #050609;   /* the night itself: fixed in both themes */
  --dusk-1: #2e3489;
  --dusk-2: #5b4b9e;
  --dusk-3: #d98cb3;

  /* Route codes. Used as a 2px rule, a dot or a numeral tint - never a fill. */
  --trail: #3582d9;
  --cursa: #f7c02b;
  --caminada: #6bc47f;

  color-scheme: dark;
}

/* Day (paper) theme: only the roles change, never the components. The accent
   darkens so it still reads as text on paper (AA); fills flip to light text. */
html[data-theme="day"] {
  --ink: #f5f3ee;
  --ink-2: #ebe8e0;
  --text: #050609;
  --text-dim: #55596b;
  --rule: rgb(5 6 9 / 14%);
  --rule-strong: rgb(5 6 9 / 30%);
  --accent: #5b5dc7;
  --on-accent: #f5f3ee;
  --trail: #1f65b8;
  --caminada: #35894c;
  color-scheme: light;
}

/* 3 ── Type ──────────────────────────────────────────────────────────────── */

:root {
  /* One family. "Display" is the same face set Black, tight and uppercase -
     numerals, kickers, countdown, ticker. Point it elsewhere to bring back a
     second face; nothing else needs to change. */
  --font-body: "Averta Std", "Averta", "Figtree", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-condensed: "Bebas Neue", var(--font-display); /* the giant footer line only */
  --font-hand: "Nanum Pen Script", "Averta Std", cursive; /* campaign kickers, one line max */

  /* Weights by role. Swap the face and only these four numbers may change. */
  --w-light: 300;
  --w-regular: 400;
  --w-bold: 800;
  --w-black: 900;

  /* Size scale - fluid via clamp(). Display sizes stay tight; body 17–19px. */
  --fs-footer-word: clamp(2.4rem, 10.3vw, 9.3rem); /* footer line: Bebas, 8.54em wide, fills the wrap */
  --fs-hero: clamp(3.25rem, min(18vw, 30svh), 16.5rem); /* hero wordmark - fills the measure, never the height */
  --fs-numeral: clamp(7rem, 30vw, 22rem);         /* sticky route numerals 21/14/12 */
  --fs-num-xl: clamp(6rem, 26vw, 18rem);          /* route-page hero numeral */
  --fs-num-l: clamp(3.5rem, 11vw, 8rem);          /* years, timeline */
  --fs-num-m: clamp(2.5rem, 7.5vw, 5rem);         /* stats, countdown */
  --fs-num-s: clamp(1rem, 1.7vw, 1.4rem);         /* hero date/place line */
  --fs-data: clamp(1.5rem, 3.5vw, 2.1rem);        /* facts, readouts */
  --fs-h1: clamp(2.5rem, 7.5vw, 5.75rem);
  --fs-h2: clamp(1.9rem, 5vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-statement: clamp(1.5rem, 4.2vw, 3rem);     /* manifesto lines */
  --fs-lead: clamp(1.15rem, 1.5vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-kicker: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.75rem;
  --fs-tagline: clamp(0.7rem, 1.5vw, 0.95rem);    /* "WHEN THE NIGHT BEGINS" */

  /* Tracking by role (em). Negative for big text, positive for small caps. */
  --track-tight: -0.03em;     /* hero, giant sans headlines */
  --track-display: -0.025em;  /* h1–h4, manifesto */
  --track-snug: -0.01em;      /* h3, lead, emphasised body */
  --track-num: -0.02em;       /* giant numerals */
  --track-caps: 0.06em;       /* buttons, nav, ticker */
  --track-label: 0.12em;      /* small uppercase labels */
  --track-kicker: 0.18em;     /* section kickers, table heads */
  --track-wide: 0.25em;       /* the poster tagline, route names */

  /* Leading by role. */
  --lh-num: 0.85;      /* giant numerals */
  --lh-hero: 0.86;     /* hero wordmark */
  --lh-heading: 0.95;  /* h1–h4 */
  --lh-snug: 1.15;     /* h3, manifesto, FAQ questions */
  --lh-lead: 1.35;     /* lead paragraphs, tagline */
  --lh-body: 1.55;     /* body copy */
}

/* 4 ── Space & layout ────────────────────────────────────────────────────── */

:root {
  --gutter: 1.5rem;
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 3rem;
  --s5: 5rem;
  --s6: 8rem;
  --pad-section: clamp(5.5rem, 15vh, 11rem); /* ≥ 20vh desktop, ≥ 12vh mobile */
  --header-h: 4.5rem;
  --mbar-h: 5rem;  /* floating tab bar + its gap */ /* mobile bottom bar */
}

@media (min-width: 48rem) {
  :root {
    --header-h: 5.25rem;
  }
}

/* 5 ── Shape ─────────────────────────────────────────────────────────────── */

:root {
  --r-sm: 2px;    /* focus rings */
  --r-pill: 999px; /* buttons, chips */
}

/* 6 ── Motion ────────────────────────────────────────────────────────────── */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);     /* out - reveals, hovers */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* in-out - loops, transitions */
  --t-theme: 800ms;   /* day/night switch: one page-wide crossfade */
  --ease-rise: cubic-bezier(0.05, 0.9, 0.2, 1);  /* the moon's climb, ahead of its drift */
  --ease-land: cubic-bezier(0.22, 0.8, 0.18, 1); /* long settle - the moon, camera drift */
  --t-micro: 240ms;
  --t-reveal: 600ms;
  --t-hero: 900ms;
  --t-draw: 1200ms;
}