/* ════════════════════════════════════════════════════════════════════
   COLORS — Midnight Pop
   Warm near-black canvas + a three-colour "pop" trio that detonates
   against the dark. Reading areas stay calm; colour lives in hero
   moments and section transitions.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Canvas / ink (warm near-black, never cold grey) ───────────────── */
  --ink-1000: #0E0B09; /* deepest — letterbox / behind hero */
  --ink-900:  #14100D; /* base canvas (page background) */
  --ink-800:  #1B1611; /* raised section */
  --ink-700:  #241D17; /* card surface */
  --ink-600:  #2E261F; /* elevated card / input */
  --ink-500:  #3B312A; /* hairline strong */
  --ink-400:  #4C4138; /* disabled fill */

  /* ── Text (warm off-white -> faint) ────────────────────────────────── */
  --paper:     #FBF8F3; /* pure headline white (warm) */
  --paper-90:  #F2ECE3; /* body text */
  --paper-70:  #C9BEB0; /* secondary text */
  --paper-50:  #998E80; /* muted / captions */
  --paper-35:  #6E6356; /* faint / disabled text */

  /* ── Pop trio — base + light (hover/hero) + deep (press) ───────────── */
  --blue:        #2F6BFF; /* vivid electric blue */
  --blue-light:  #5C92FF;
  --blue-deep:   #1F4FD1;

  --persimmon:       #FB4D2A; /* hot red / persimmon */
  --persimmon-light: #FF6E4D;
  --persimmon-deep:  #D63A1B;

  --gold:        #FFC53D; /* golden yellow */
  --gold-light:  #FFD673;
  --gold-deep:   #E2A516;

  /* ── Tinted glass fills (colour at low opacity, for chips/halos) ───── */
  --blue-wash:      rgba(47, 107, 255, 0.14);
  --persimmon-wash: rgba(251, 77, 42, 0.14);
  --gold-wash:      rgba(255, 197, 61, 0.16);

  /* ── Semantic surfaces ─────────────────────────────────────────────── */
  --bg-page:        var(--ink-900);
  --bg-deep:        var(--ink-1000);
  --bg-section:     var(--ink-800);
  --surface-card:   var(--ink-700);
  --surface-raised: var(--ink-600);
  --border-hair:    rgba(251, 248, 243, 0.08); /* faint light hairline */
  --border-soft:    rgba(251, 248, 243, 0.14);
  --border-strong:  var(--ink-500);

  /* ── Semantic text ─────────────────────────────────────────────────── */
  --text-display:   var(--paper);
  --text-body:      var(--paper-90);
  --text-muted:     var(--paper-70);
  --text-faint:     var(--paper-50);

  /* ── Accent role (default pop = blue; case studies override) ───────── */
  --accent:        var(--blue);
  --accent-light:  var(--blue-light);
  --accent-deep:   var(--blue-deep);
  --accent-wash:   var(--blue-wash);
  --accent-on:     var(--paper); /* text on a filled accent button */

  /* ── Status (used sparingly, tuned warm to fit the canvas) ─────────── */
  --positive: #3DD68C;
  --warning:  var(--gold);
  --danger:   var(--persimmon);
}

/* ── Accent themes — set data-accent on any container to retint ───────
   Lets ONE system flex per case study: bold blue, playful gold, or a
   calmer persimmon, without competing with photography. ─────────────── */
[data-accent="blue"] {
  --accent: var(--blue);      --accent-light: var(--blue-light);
  --accent-deep: var(--blue-deep); --accent-wash: var(--blue-wash);
  --accent-on: var(--paper);
}
[data-accent="persimmon"] {
  --accent: var(--persimmon);      --accent-light: var(--persimmon-light);
  --accent-deep: var(--persimmon-deep); --accent-wash: var(--persimmon-wash);
  --accent-on: var(--paper);
}
[data-accent="gold"] {
  --accent: var(--gold);      --accent-light: var(--gold-light);
  --accent-deep: var(--gold-deep); --accent-wash: var(--gold-wash);
  --accent-on: var(--ink-900); /* dark text on yellow for contrast */
}