/* ==========================================================================
   Gŵyl Tyisha, Design tokens
   The single source of truth for the visual language. Three layers:
     1. Primitives , raw values (never reference these directly in components)
     2. Semantic   , meaning-based aliases (use these in components)
     3. Scales     , type, space, and effect scales
   Aesthetic: punk protest zine / ransom-note collage on mustard yellow,
   high-contrast halftone photography. Derived from Karl Sedgwick's artwork.
   ========================================================================== */

:root {
  /* ----- 1. Primitive colours -------------------------------------------- */
  --c-yellow:        #d8b02a; /* mustard base (poster) */
  --c-yellow-acid:   #e9d31c; /* acid yellow (torn reveal) */
  --c-yellow-deep:   #c79a1f; /* shadowed mustard */
  --c-ink:           #141009; /* near-black, warm */
  --c-ink-2:         #241c10;
  --c-paper:         #f4efe2; /* cut-out scrap off-white */
  --c-red:           #bd2417; /* stencil red, for fills and on paper only */
  --c-oxblood:       #5c0f08; /* deep oxblood, accessible red text on yellow (>4.5:1) */
  --c-grey-warm:     #cdbf9f; /* muted text on dark */
  --c-grey-faint:    #9a8a6c;

  /* ----- 2. Semantic colours --------------------------------------------- */
  --color-bg:            var(--c-yellow);
  --color-bg-acid:       var(--c-yellow-acid);
  --color-surface:       var(--c-paper);   /* cards, scraps */
  --color-surface-dark:  var(--c-ink);     /* inverted bands */
  --color-text:          var(--c-ink);
  --color-text-invert:   var(--c-paper);
  --color-text-muted:    var(--c-grey-warm);
  --color-accent:        var(--c-red);      /* bright red, fills, borders, accents on paper */
  --color-accent-deep:   var(--c-oxblood);  /* deep red, accent TEXT on yellow (AA-safe) */
  --color-accent-text:   var(--c-paper);
  --color-line:          rgba(20, 16, 9, 0.35);
  --color-line-invert:   rgba(244, 239, 226, 0.30);
  --color-focus:         var(--c-ink);
  --color-focus-invert:  var(--c-yellow-acid);

  /* ----- 3a. Type families ----------------------------------------------- */
  --font-impact:  "Anton", Impact, "Haettenschweiler", sans-serif; /* headlines */
  --font-wood:    "Rye", Georgia, serif;                            /* woodtype accent */
  --font-type:    "Special Elite", "Courier New", monospace;        /* typewriter / labels */
  --font-marker:  "Shantell Sans", "Comic Sans MS", cursive;        /* handwritten Welsh marker, 700 (latin-ext: ŵ ŷ) */
  --font-stencil: "Saira Stencil One", Impact, sans-serif;          /* stencil dates */
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;   /* reading text */

  /* ----- 3b. Fluid type scale (mobile → desktop via clamp) --------------- */
  --fs-xs:      0.78rem;
  --fs-sm:      0.9rem;
  --fs-base:    1.0625rem;
  --fs-md:      clamp(1.1rem, 0.9rem + 0.9vw, 1.4rem);
  --fs-lg:      clamp(1.4rem, 1rem + 2vw, 2rem);
  --fs-xl:      clamp(1.9rem, 1.2rem + 3.4vw, 3rem);
  --fs-2xl:     clamp(2.4rem, 1.4rem + 5vw, 3.6rem);
  --fs-display: clamp(2.3rem, 1rem + 7vw, 4.6rem);

  --lh-tight:  1.05;
  --lh-body:   1.6;
  --tracking-mega: 0.16em;

  /* ----- 3c. Spacing scale (modular, ~1.5 ratio) ------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* ----- 3d. Layout ------------------------------------------------------ */
  --measure:    65ch;     /* readable line length */
  --container:  1180px;
  --gutter:     1.25rem;

  /* ----- 3e. Borders & shadows (the "scrappy" hard-offset look) ---------- */
  --border-weight: 3px;
  --border:        var(--border-weight) solid var(--color-text);
  --shadow-block:     8px 8px 0 var(--color-text);
  --shadow-block-red: 4px 4px 0 var(--color-accent);

  /* ----- 3f. Motion ------------------------------------------------------ */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:    0.15s;
  --dur:         0.6s;
}