/* ─────────────────────────────────────────────────────────
   COLORS
   The system is contrast, not color: pure black on pure white.
   The 1px black hairline is the architectural spine of the brand.
   Figma's signature accents appear only in tiny illustration
   flourishes, tags, or link-hover — never as surface fills.
   ───────────────────────────────────────────────────────── */
:root {
  /* Base — brand & contrast */
  --black: #000000;
  --white: #ffffff;

  /* Ink */
  --ink: #000000;         /* primary text, borders, grid lines, CTA fills */
  --ink-mute: #666666;    /* secondary / captions / metadata */

  /* Surfaces */
  --canvas: #ffffff;      /* base background — ~90% of the interface */
  --canvas-soft: #f5f5f5; /* alternate reading blocks, passive cards */
  --canvas-dark: #000000; /* polarity flip: footers, featured tiers */

  /* Hairline — the 1px spine */
  --hairline: #000000;

  /* Accents — sparing use only (icons, tags, link hover) */
  --accent-blue: #18a0fb;
  --accent-purple: #7b61ff;
  --accent-yellow: #ffeb00;
  --accent-green: #1bc47d;

  /* ── Semantic aliases ── */
  --text-body: var(--ink);
  --text-muted: var(--ink-mute);
  --text-inverse: var(--white);
  --text-link: var(--ink);
  --text-link-hover: var(--accent-blue);

  --surface-page: var(--canvas);
  --surface-soft: var(--canvas-soft);
  --surface-card: var(--canvas);
  --surface-inverse: var(--canvas-dark);
  --surface-hover: var(--canvas-soft);

  --border-hairline: var(--hairline);
  --border-width: 1px;

  --focus-ring: var(--accent-blue);
}