/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Paper tones */
  --color-paper:        #FFFFFF;
  --color-paper-aged:   #F2F2F2;
  --color-paper-dark:   #DDDDDD;

  /* Ink tones */
  --color-ink:          #000000;
  --color-ink-muted:    #555555;
  --color-ink-faint:    #999999;

  /* Rule color */
  --color-rule:         #000000;

  /* Brand accents — all black in B&W mode */
  --color-red:          #000000;
  --color-green:        #000000;

  /* Pop — black for hover/CTA */
  --color-pop:          #000000;
  --color-pop-dark:     #333333;

  /* Type scale */
  --text-xs:       10px;
  --text-sm:       12px;
  --text-base:     15px;
  --text-md:       18px;
  --text-lg:       24px;
  --text-xl:       36px;
  --text-2xl:      52px;
  --text-masthead: clamp(40px, 8vw, 80px);

  /* Spacing scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
}

/* ── Dark mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:      #0A0A0A;
    --color-paper-aged: #141414;
    --color-paper-dark: #2A2A2A;
    --color-ink:        #FFFFFF;
    --color-ink-muted:  #AAAAAA;
    --color-rule:       #FFFFFF;
    --color-red:        #FFFFFF;
    --color-green:      #FFFFFF;
    --color-pop:        #FFFFFF;
    --color-pop-dark:   #CCCCCC;
  }
}