/* ── DESIGN TOKENS ── */
/* See CLAUDE.md §3 for usage rules. Do not hardcode hex values elsewhere. */

:root {
  /* ── Light surfaces ── */
  --white:  #FFFFFF;    /* page background, cards */
  --gray:   #F7F7F7;    /* image panels, table labels, inline code */
  --line:   #E5E5E5;    /* borders, dividers, layout guides */

  /* ── Ink (text on light) ── */
  --ink:   #111111;     /* headings, primary text, dark buttons */
  --ink-2: #4D4D4D;     /* body copy */
  --ink-3: #6B6B6B;     /* muted text, eyebrows — 5.0:1 on --gray */

  /* ── Dark bands + footer ── */
  --dark:      #141414; /* dark section background */
  --dark-line: #2E2E2E; /* borders on dark */
  --on-dark:   #FFFFFF; /* text on dark */
  --on-dark-2: #A6A6A6; /* muted text on dark — 7.6:1 on --dark */

  /* ── Shape ── */
  --radius: 4px;        /* buttons, inputs, tags */
}