/* Afters Cards design tokens.
   Palette, texture, type and motion tokens only. No component rules here:
   see site.css. Values are fixed by IMPLEMENTATION-PLAN.md §1 and §4; do
   not adjust without checking that file first. */

/* ---------------------------------------------------------------------
   Fonts, self-hosted, latin subset, font-display: swap.
   Sourced from the Google Fonts css2 endpoint (T0 method) and downloaded
   into media/fonts/. Archivo is the variable file: the font-weight and
   font-stretch ranges below are required or the width axis silently
   no-ops. (Caveat was dropped 2026-08-21: its only use was the live card
   back's pencil-style edition number, and the card back became a fixed
   image on 2026-08-19, so the handwriting font no longer loads.)
   ------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../media/fonts/archivo-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fonts/public-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/fonts/public-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fonts/courier-prime-400.woff2") format("woff2");
}

:root {
  /* -- Palette (IMPLEMENTATION-PLAN.md §1) ------------------------- */
  --void: #0e0e11;
  --denim: #15161b;
  --paper: #f2efe9;
  --dim: rgba(242, 239, 233, 0.6);
  --hair: rgba(242, 239, 233, 0.14);
  --ember: #ff5a36;
  --amber: #ffb25a;

  /* -- Texture ------------------------------------------------------ */
  /* Inline SVG feTurbulence grain: baseFrequency 0.9, numOctaves 2,
     stitchTiles required (otherwise tiling seams show), followed by a
     feColorMatrix saturate(0) to strip the coloured noise turbulence
     produces. #, <, >, " and % are percent-encoded. */
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22grain%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23grain)%22/%3E%3C/svg%3E");
  --weave: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 3px
  );

  /* -- Type ----------------------------------------------------------
     --h1/--h2/--body clamps mix rem and vw in the middle term so the
     clamp actually moves at common widths (a pure-rem middle term never
     changes with viewport size). */
  --font-display: "Archivo", sans-serif;
  --font-text: "Public Sans", sans-serif;
  --font-data: "Courier Prime", monospace;

  --h1: clamp(2.75rem, 8.5vw, 8rem);
  --h2: clamp(2rem, 5vw, 4.25rem);
  --body: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);

  /* -- Layout --------------------------------------------------------- */
  --content-max: 1160px;
  --content-pad: 6vw;
  --section-pad-block: clamp(6rem, 14vh, 10rem);

  /* -- Motion (IMPLEMENTATION-PLAN.md §4; used from T1 onward, tokens
     only defined here in T0) ------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 320ms;
  --dur-m: 640ms;
  --dur-l: 960ms;
}