/* WTC Design System v0.1 — token layer.
   Machine-readable source of truth: ../tokens.json (kept in sync by hand).
   Components must consume tokens, never raw hex/px values. */

/* ---- Self-hosted fonts (SIL OFL 1.1 — see assets/fonts/OFL-*.txt) ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/archivo-black-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-700.woff2") format("woff2");
}

:root {
  /* ---- Colour: raw palette (do not use directly in components) ---- */
  --wtc-palette-ink: #171310;          /* warm black */
  --wtc-palette-paper: #F3EDE2;        /* warm off-white */
  --wtc-palette-paper-shade: #EDE4D3;  /* warm off-white, one step down */
  --wtc-palette-magenta: #F0148A;      /* PRIMARY accent */
  --wtc-palette-yellow: #FFCC00;       /* BOUNDED secondary — aftershock only */

  /* ---- Colour: semantic ---- */
  --wtc-text-primary: var(--wtc-palette-ink);
  --wtc-text-inverse: var(--wtc-palette-paper);
  --wtc-text-accent: var(--wtc-palette-magenta);
  --wtc-surface-page: var(--wtc-palette-paper);
  --wtc-surface-page-veil: rgba(243, 237, 226, 0.94); /* sticky header: rgba, not color-mix — older mobile Safari support */
  --wtc-surface-raised: var(--wtc-palette-paper-shade);
  --wtc-surface-inverse: var(--wtc-palette-ink);
  --wtc-surface-accent: var(--wtc-palette-magenta);
  --wtc-surface-aftershock: var(--wtc-palette-yellow);
  /* Peek layer over the closed frame's die-cut gap: milky, translucent paper —
     same rgba-not-color-mix rationale as --wtc-surface-page-veil above. */
  --wtc-surface-peek-edge: rgba(243, 237, 226, 0.62);
  --wtc-surface-peek-core: rgba(243, 237, 226, 0.34);
  --wtc-border-strong: var(--wtc-palette-ink);
  --wtc-border-hairline: rgba(23, 19, 16, 0.18);
  --wtc-border-hairline-inverse: rgba(243, 237, 226, 0.28);
  --wtc-focus-ring: var(--wtc-palette-magenta);
  --wtc-focus-ring-inverse: var(--wtc-palette-paper);

  /* ---- Typography ---- */
  --wtc-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --wtc-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wtc-font-label: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wtc-type-display-1: clamp(2.1rem, 4.6vw, 3.5rem);
  --wtc-type-display-2: clamp(1.6rem, 3vw, 2.4rem);
  --wtc-type-display-3: clamp(1.25rem, 2.2vw, 1.6rem);
  --wtc-type-body-lead: clamp(1rem, 1.25vw, 1.125rem);
  --wtc-type-body: 1rem;
  --wtc-type-body-small: 0.875rem;
  --wtc-type-label: 0.6875rem;
  --wtc-type-label-lg: 0.75rem;

  --wtc-leading-display: 0.94;
  --wtc-leading-heading: 1.05;
  --wtc-leading-body: 1.6;
  --wtc-tracking-display: -0.01em;
  --wtc-tracking-label: 0.14em;
  --wtc-measure: 56ch;
  --wtc-measure-tight: 44ch;

  /* ---- Spacing (4px base) ---- */
  --wtc-space-1: 0.25rem;
  --wtc-space-2: 0.5rem;
  --wtc-space-3: 0.75rem;
  --wtc-space-4: 1rem;
  --wtc-space-5: 1.5rem;
  --wtc-space-6: 2rem;
  --wtc-space-7: 3rem;
  --wtc-space-8: 4.5rem;

  /* ---- Layout ---- */
  --wtc-page-max: 1240px;
  --wtc-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wtc-section-rhythm: clamp(3.5rem, 8vh, 6.5rem);
  --wtc-aspect-cake: 4 / 5;

  /* ---- Shape, border, elevation ---- */
  --wtc-radius: 0;
  --wtc-border-width-hair: 1px;
  --wtc-border-width-rule: 2px;
  --wtc-border-width-print: 3px;
  --wtc-stamp-rotate: -2deg;
  --wtc-stamp-rotate-mark: -4deg;
  /* Strike stamp (internal ref): the reveal conclusion that cuts
     diagonally across the frame's upper edge. Steeper than the mark rotation
     so it reads as a strike, not a tilted banner. --wtc-slide-pad reserves
     the stamp's overhang room above the frame inside each slide: half the
     stamp's box height plus the rotation lift at the widest measured case. */
  --wtc-stamp-rotate-strike: -6deg;
  /* Cap 2.375rem: "What the Cake?!" must stay ONE line inside the 460px-capped
     frame — measured at 10.26x the font size in Archivo Black, plus 1em
     inline padding and 6px border, the single-line stamp needs
     font <= ~38.7px at the 441px stamp box. A wrapped two-line strike grows
     tall enough to collide with the kicker and the slider viewport's clip
     edge (measured at 768px+ with larger caps). Pad factor 1.8 covers the
     single-line overhang: half the stamp box (~38px) + rotation lift
     (~23px at -6deg over the 441px box).
     Floor 1.375rem, not 1.5rem (internal ref): at a 320px viewport the
     plate is 280px, so the stamp box is 269px and — after 1em inline padding
     and the 6px border — a single line needs font <= 263/11.26 = 23.4px. The
     old 24px floor was just over that, so the strike wrapped to two lines and
     its rotated top corner met the kicker. This matters more now that the
     stage stamp is painted at first load rather than only after a reveal. */
  --wtc-strike-size: clamp(1.375rem, 7vw, 2.375rem);
  --wtc-slide-pad: calc(var(--wtc-strike-size) * 1.8);
  --wtc-elevation-print: 4px 4px 0 var(--wtc-surface-accent);
  --wtc-elevation-print-hover: 5px 5px 0 var(--wtc-surface-accent);
  --wtc-elevation-print-active: 1px 1px 0 var(--wtc-surface-accent);
  --wtc-elevation-frame: 0 18px 44px rgba(23, 19, 16, 0.28);

  /* ---- Motion ---- */
  --wtc-duration-rupture: 550ms;
  --wtc-duration-aftershock: 400ms;
  --wtc-duration-ui: 150ms;
  /* Slide transitions are a distinct, quieter interaction from the reveal
     choreography above — shorter than the rupture so it never upstages it. */
  --wtc-duration-slide: 260ms;
  --wtc-delay-aftershock: 480ms;
  --wtc-ease-rupture: cubic-bezier(0.5, 0, 0.9, 0.4);
  --wtc-ease-aftershock: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wtc-ease-ui: ease-out;

  /* ---- Controls ---- */
  --wtc-hit-min: 44px;
  --wtc-hit-primary: 52px;
  --wtc-focus-width: 3px;
  --wtc-focus-offset: 2px;
}

/* Reduced motion collapses the timing tokens; every state stays complete. */
:root[data-motion="reduced"] {
  --wtc-duration-rupture: 1ms;
  --wtc-duration-aftershock: 1ms;
  --wtc-duration-ui: 1ms;
  --wtc-duration-slide: 1ms;
  --wtc-delay-aftershock: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wtc-duration-rupture: 1ms;
    --wtc-duration-aftershock: 1ms;
    --wtc-duration-ui: 1ms;
    --wtc-duration-slide: 1ms;
    --wtc-delay-aftershock: 0ms;
  }
}