/* ============================================================
   Eros Decoded — Color tokens
   Black. Red. White. Sharp, confident, "meta".
   ============================================================ */
:root {
  /* --- Core ink: near-black, faintly warm --- */
  --ink-900: #000000;   /* true black — pure sections */
  --ink-800: #0A0908;   /* primary page black */
  --ink-700: #100C0C;   /* warm black — hero field */
  --ink-600: #161111;   /* raised dark surface */
  --ink-500: #1E1818;   /* card-on-black / hairline borders */
  --ink-400: #2A2323;   /* dark border, divider on black */

  /* --- Red: the signal color --- */
  --red-700: #8E0F0F;   /* deep red, pressed states */
  --red-600: #B81313;   /* hover red */
  --red-500: #E11818;   /* PRIMARY red — CTAs, accents */
  --red-400: #F22A2A;   /* bright hot red, focus glow */
  --red-glow: rgba(225, 24, 24, 0.55);   /* button/halo glow */
  --red-tint: rgba(225, 24, 24, 0.12);   /* faint red wash */

  /* --- Light: paper + off-white --- */
  --paper-000: #FFFFFF; /* pure white — light sections */
  --paper-050: #F7F5F4; /* off-white surface */
  --paper-100: #ECEAE8; /* light gray card */
  --bone-100: #F4EFED;  /* warm off-white display ink on black */

  /* --- Neutral grays (text + UI) --- */
  --gray-100: #C9C5C3;
  --gray-200: #9A9694;  /* body text on black */
  --gray-300: #7E7A78;  /* muted / captions */
  --gray-400: #5A5654;  /* faint labels */
  --gray-700: #3A3634;

  /* --- Metallic header bar (the "meta" silver) --- */
  --silver-hi: #E3E1DF;
  --silver-mid: #D2D0CE;
  --silver-lo: #BCBAB8;

  /* ============================================================
     Semantic aliases — reach for these in product code
     ============================================================ */
  --bg-page: var(--ink-800);
  --bg-hero: var(--ink-700);
  --bg-pure: var(--ink-900);
  --bg-light: var(--paper-000);
  --bg-light-alt: var(--paper-050);
  --surface-card: var(--ink-600);
  --surface-card-light: var(--paper-100);
  --surface-bar: var(--silver-mid);

  --text-display: var(--bone-100);     /* big headlines on black */
  --text-display-dark: var(--ink-900); /* headlines on light */
  --text-strong: var(--paper-000);     /* emphasized white */
  --text-body: var(--gray-200);        /* body copy on black */
  --text-body-dark: var(--gray-700);   /* body copy on light */
  --text-muted: var(--gray-300);
  --text-accent: var(--red-500);

  --border-hairline: var(--ink-500);
  --border-dark: var(--ink-400);
  --border-accent: var(--red-500);

  --accent: var(--red-500);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);

  --focus-ring: var(--red-400);
}