/* =========================================================================
   Magenta - design tokens
   Everything downstream reads from here. Change a value once, site follows.
   ========================================================================= */

:root {
  /* --- Process colours -------------------------------------------------
     Magenta is the brand, and it is also the M in CMYK. Cyan and yellow
     are not decoration - they are the other plates, which is why they are
     allowed on the page at all. Keep them under ~8% of any given screen. */
  /* Sampled from the brand SVGs in the kickoff kit, which are authoritative -
     the values that were here before were close but not exact, and the
     secondary was process cyan rather than the brand's teal. */
  --m:            #EC008C;   /* logo magenta */
  --m-deep:       #B4006A;   /* magenta for small text ON light grounds, 5.7:1 */
  --m-light:      #FF7CC4;   /* magenta for small text ON dark grounds, 5.6:1 */
  --m-tint:       #FDE4F2;
  --teal:         #2BA48C;   /* brand secondary, from the icon set */
  --teal-tint:    #D9F0EA;   /* pale teal - highlighter sweeps, same role as --m-tint */
  --y:            #FFF100;   /* brand yellow */
  --k:            #333333;   /* brand dark, from the primary logo */

  /* Kept so the existing process-colour effects still resolve. The brand does
     not actually use cyan; anything still reading --c is a leftover of the
     four-plate treatment and should move to --teal. */
  --c:            var(--teal);

  --paper:        #FDFEFF;   /* coated white - the default ground */
  --stock:        #F2EDE4;   /* uncoated / raw stock - section breathers */
  --ink:          #333333;
  --ink-soft:     #5A5A5A;
  --rule:         rgba(13, 13, 13, 0.14);

  /* --- Semantic --------------------------------------------------------- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --accent:       var(--m);

  /* --- Header ----------------------------------------------------------
     The header runs magenta with paper type on it. Measured contrast of
     paper on --m is 3.84:1, which clears WCAG AA for large text but not for
     the 13px nav labels (needs 4.5:1). Swapping --header-bg to --m-deep
     takes it to 5.73:1 and still reads unmistakably magenta - it is a
     one-value change, kept here so it does not have to be hunted for.
     The CTA sits the other way round: paper ground, magenta type. That text
     is small too, so it uses --m-deep rather than --m to clear AA. */
  --header-bg:      var(--m);
  --header-fg:      var(--paper);
  --header-cta-bg:  var(--paper);
  --header-cta-fg:  var(--m-deep);

  /* --- Type ------------------------------------------------------------
     Display is a heavy condensed grotesque; the fallbacks are chosen to
     keep roughly the same width so layout does not jump before the
     webfonts land. See assets/fonts/README. */
  --font-display: "Anton", "Archivo Black", "Haettenschweiler",
                  "Arial Narrow Bold", Impact, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-hand:    "Caveat", "Bradley Hand", "Segoe Script", cursive;

  /* Fluid scale, 360px -> 1600px viewport */
  --fs-xs:    clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --fs-sm:    clamp(0.84rem, 0.79rem + 0.22vw, 0.95rem);
  --fs-base:  clamp(1rem,    0.95rem + 0.26vw, 1.14rem);
  --fs-lede:  clamp(1.12rem, 1rem    + 0.62vw, 1.5rem);
  --fs-h3:    clamp(1.25rem, 1.1rem  + 0.75vw, 1.75rem);
  --fs-h2:    clamp(2rem,    1.4rem  + 3vw,    4rem);
  /* The h1 is one long word in a condensed face, so its minimum is governed
     by fitting "MAGENTA" inside a 375px viewport's gutters, not by what looks
     big. At 3.2rem it overflowed its own line box by 6px. */
  --fs-h1:    clamp(2.6rem,  0.85rem + 9.4vw,  9.5rem);

  --lh-tight: 0.88;
  --lh-snug:  1.1;
  --lh-body:  1.6;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.16em;

  /* --- Space ------------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 2rem + 8vw, 9rem);
  --wrap:      1320px;
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Hard offset shadow - printed sticker, not soft UI drop shadow */
  --shadow-hard:  4px 4px 0 var(--ink);
  --shadow-hard-lg: 8px 8px 0 var(--ink);

  --border: 2px solid var(--ink);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-grain:  1;
  --z-base:   2;
  --z-sticky: 50;
  /* The mobile drawer sits below the header, not above it. The close control
     IS the header's toggle - its bars rotate into an X when the drawer opens -
     so stacking the drawer on top buried the only way out of the menu. */
  --z-nav:    60;
  --z-header: 70;
}

/* The design is a single committed light palette - it is a print shop, the
   ground is paper. Dark mode only softens the paper white so an OLED screen
   at night is not a torch; the ink stays ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #F4F2EE;
    --stock: #E8E2D6;
  }
}