/* Every colour here was sampled out of the character art itself
   (tools: magick -colors N -unique-colors), so the page and the drawing
   are literally the same palette rather than a theme bolted on beside it. */
:root {
  /* ink + paper */
  --ink:        #141010;
  --ink-soft:   #3a3232;
  --ink-faint:  #6e6260;
  --paper:      #fefefe;
  --paper-warm: #f6f2ec;
  --paper-dim:  #ece6dd;

  /* the open skull */
  --cavity:      #641016;
  --cavity-mid:  #821017;
  --cavity-rim:  #ba5156;

  /* the brain */
  --brain:      #f29cb3;
  --brain-deep: #d3798c;

  /* the drool */
  --drool:      #bce0e3;
  --drool-deep: #99a6a8;

  /* semantic */
  --bg:        var(--paper-warm);
  --fg:        var(--ink);
  --accent:    var(--cavity-mid);
  --accent-2:  var(--brain);
  --accent-3:  var(--drool);

  /* stroke weights, matched to the art's hand-drawn line */
  --rule:      3px;
  --rule-thin: 1.5px;
  --rule-fat:  6px;

  /* rhythm */
  --gap-1: .5rem;
  --gap-2: 1rem;
  --gap-3: 1.75rem;
  --gap-4: 3rem;
  --gap-5: 5rem;
  --gap-6: 8rem;
  --pad-x: clamp(1.15rem, 5vw, 4.5rem);
  --measure: 62ch;
  --wide: 1440px;

  /* motion — every duration routes through here so the
     reduced-motion block below can flatten the whole site at once. */
  --t-fast: 140ms;
  --t-mid:  320ms;
  --t-slow: 700ms;
  --ease:   cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; --t-slow: 0ms; }
}