/* ==========================================================================
   tokens.css — THE ONE FILE TO EDIT FOR COLORS, FONTS AND SPACING
   Every other stylesheet reads these variables. Change a value here and it
   changes everywhere.
   ========================================================================== */
:root {
  /* --- Process (CMYK) palette --- */
  --paper:    #F3EAD3;   /* newsprint background */
  --paper-2:  #E9DDBF;   /* slightly darker paper, for alternating panels */
  --ink:      #141414;   /* black keylines + body text */
  --ink-soft: #3A3630;   /* secondary text */
  --yellow:   #FFD900;   /* process yellow (caption boxes, highlights) */
  --cyan:     #00AEEF;   /* process cyan */
  --magenta:  #EC008C;   /* process magenta */
  --white:    #FFFBF2;

  /* --- Misregistration offsets (cheap-print look on headlines) --- */
  --misreg-x: 3px;
  --misreg-y: 2px;

  /* --- Keylines --- */
  --line:       3px;     /* standard panel border */
  --line-heavy: 5px;     /* masthead / hero border */
  --shadow:     6px 6px 0 var(--ink);   /* hard offset drop shadow */

  /* --- Type --- */
  --font-display: 'Anton', 'Impact', sans-serif;         /* masthead, headlines */
  --font-sfx:     'Bangers', 'Impact', sans-serif;        /* onomatopoeia, starbursts */
  --font-caption: 'Comic Neue', 'Comic Sans MS', cursive; /* caption boxes, labels */
  --font-body:    'Lora', Georgia, serif;                 /* paragraphs */
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace; /* PLC, tags, badges */

  /* --- Spacing & layout --- */
  --gutter: 18px;        /* space between comic panels */
  --radius: 2px;
  --max-w:  1240px;
  --section-pad: clamp(48px, 8vw, 110px);

  /* --- Halftone --- */
  --dot-size: 5px;
  --dot-alpha: 0.16;
}