/* ── Color tokens ──────────────────────────────────────────────────────────
   The system has ONE hue. Every gray is #1c1c1c (charcoal) at an opacity.
   Never introduce saturated accents — the palette is intentionally warm-neutral. */
:root {
  /* Base — the three foundations */
  --cream: #f7f4ed;        /* page + surface — warm parchment, never #fff */
  --charcoal: #1c1c1c;     /* primary text, dark surfaces — organic near-black */
  --off-white: #fcfbf8;    /* text on dark surfaces */

  /* Opacity-derived neutral scale (all from charcoal) */
  --charcoal-100: #1c1c1c;
  --charcoal-83: rgba(28, 28, 28, 0.83);  /* strong secondary text */
  --charcoal-82: rgba(28, 28, 28, 0.82);  /* body copy */
  --charcoal-40: rgba(28, 28, 28, 0.4);   /* interactive borders */
  --charcoal-04: rgba(28, 28, 28, 0.04);  /* hover tint */
  --charcoal-03: rgba(28, 28, 28, 0.03);  /* faint overlay */
  --muted: #5f5f5d;        /* secondary text, captions, descriptions */

  /* Surfaces & borders */
  --border-soft: #eceae4;            /* passive containment — cards, dividers, images */
  --border-interactive: var(--charcoal-40); /* outlined buttons, focus boundaries */
  --surface: var(--cream);
  --surface-card: var(--cream);

  /* Interactive / focus */
  --ring: rgba(59, 130, 246, 0.5);   /* keyboard focus ring (a11y only) */

  /* ── Semantic aliases ── */
  --bg: var(--cream);
  --text-strong: var(--charcoal-100);
  --text-body: var(--charcoal-82);
  --text-muted: var(--muted);
  --text-on-dark: var(--off-white);
  --surface-dark: var(--charcoal-100);
}