/* ============================================================
   Signature 4 — Color tokens
   The brand lives on near-black with a single, unmistakable acid
   yellow. A warm cream surface carries heritage / editorial moments.
   ============================================================ */
:root {
  /* ---- Ink (the dark canvas) ---------------------------------- */
  --ink-pure:   #000000;  /* full-bleed page + image sections      */
  --ink-950:    #0c0c0c;  /* deep section background               */
  --ink-900:    #141414;  /* base surface                          */
  --ink-850:    #1c1c1c;  /* primary panel / nav bar (the site bg) */
  --ink-800:    #242424;  /* elevated surface / card               */
  --ink-700:    #2e2e2e;  /* raised / hover surface                */
  --ink-600:    #3a3a3a;  /* hairline-on-dark, dividers            */

  /* ---- Paper (the light/heritage surface) --------------------- */
  --paper-pure: #ffffff;
  --paper-warm: #edede5;  /* cream "Evolution" / editorial blocks  */
  --paper-warm-2:#e3e2d8; /* slightly deeper cream                 */

  /* ---- Signal (the one accent: acid chartreuse yellow) -------- */
  --signal:        #e9e037;  /* the "4" mark, CTAs, arrows, marker */
  --signal-bright: #f4ec55;  /* hover lift                         */
  --signal-deep:   #cfc62c;  /* pressed / on-light contrast        */
  --signal-glow:   rgba(233, 224, 55, 0.28); /* focus ring / glow  */

  /* ---- Sub-brand accents (documented; main brand is yellow) --- */
  --fire:      #d9381e;  /* 4 FIRE vertical                        */
  --appliance: #c9ccd2;  /* 4 APPLIANCE (cool steel)               */

  /* ---- Text on dark ------------------------------------------- */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted:     rgba(255, 255, 255, 0.45);
  --text-faint:     rgba(255, 255, 255, 0.30);

  /* ---- Text on light (cream/white) ---------------------------- */
  --text-ink:        #1c1c1c;
  --text-ink-soft:   rgba(28, 28, 28, 0.64);
  --text-ink-muted:  rgba(28, 28, 28, 0.42);

  /* ---- Text on signal (dark text on yellow) ------------------- */
  --text-on-signal:  #161616;

  /* ---- Borders / strokes -------------------------------------- */
  --stroke-on-dark:   rgba(255, 255, 255, 0.14);
  --stroke-on-dark-2: rgba(255, 255, 255, 0.08);
  --stroke-on-light:  rgba(28, 28, 28, 0.16);
  --stroke-signal:    var(--signal);

  /* ---- Semantic aliases (use these in components) ------------- */
  --bg-page:        var(--ink-pure);
  --bg-surface:     var(--ink-850);
  --bg-elevated:    var(--ink-800);
  --bg-heritage:    var(--paper-warm);
  --accent:         var(--signal);
  --accent-contrast:var(--text-on-signal);
  --divider:        var(--ink-600);
}