:root{
  /* ---- Brand accents (analogous warm reds) ---- */
  --color-accent: #e23a1c;          /* primary accent — large elements: headings, fills, thick lines */
  --color-accent-2: #fe4b2d;        /* secondary — text, links, CTAs, small interactive */
  --color-accent-mid: #e84b1c;      /* intermediate — gradient midpoint only */
  --color-accent-active: #c8331a;   /* press / darker variant of primary */

  /* ---- Surfaces (dark → light story) ---- */
  --color-canvas: #0a0a0a;          /* near-black page floor */
  --color-surface-soft: #141414;    /* soft band tints, dividers */
  --color-surface-card: #1c1c1c;    /* cards on dark */
  --color-surface-elevated: #262626;/* nested cards */
  --color-offwhite: #f5f5f0;        /* light base — final sections */
  --color-surface-light: #ebebe4;   /* card on light sections */

  /* ---- Text ---- */
  --color-ink: #f5f5f0;             /* text on dark (off-white, never pure white) */
  --color-ink-dark: #0a0a0a;        /* text on light sections */
  --color-body: #c9c9c2;            /* running text on dark */
  --color-body-strong: #e2e2db;     /* emphasized on dark */
  --color-muted: #8a8a83;           /* captions, footer links */
  --color-muted-soft: #5a5a54;      /* fine print */

  /* ---- Lines ---- */
  --color-hairline: #2a2a28;

  /* ---- Neutral grey ramp (warm-tinted, #262626 → off-white) ---- */
  --grey-900: #262626;
  --grey-800: #3a3a37;
  --grey-700: #55534e;
  --grey-600: #6f6c66;
  --grey-500: #8a8a83;
  --grey-400: #a8a79f;
  --grey-300: #c9c9c2;
  --grey-200: #dcdcd4;
  --grey-100: #ebebe4;
  --grey-050: #f5f5f0;
  --color-hairline-strong: #3a3a37;
  --color-hairline-light: #d5d5cd;  /* hairline on light sections */

  /* ---- On-color ---- */
  --color-on-accent: #f5f5f0;       /* off-white on red fills */
  --color-on-dark: #f5f5f0;

  /* ---- Semantic accents ---- */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--color-ink);
  --text-body: var(--color-body);
  --text-muted: var(--color-muted);
  --text-on-accent: var(--color-on-accent);
  --text-highlight: var(--color-accent-2);   /* inline link / highlight on dark */

  --surface-page: var(--color-canvas);
  --surface-card: var(--color-surface-card);
  --surface-elevated: var(--color-surface-elevated);

  --border-hairline: var(--color-hairline);
  --accent: var(--color-accent);
  --accent-active: var(--color-accent-active);
  --on-accent: var(--color-on-accent);
}