/* Faces of Desire — Color System
   Dark, editorial, cinematic. Black canvas, luminous teal signal,
   warm editorial accents drawn from the portrait imagery. */
:root {
  /* — Base ink / canvas — */
  --ink-1000: #000000;   /* true black, full-bleed backdrop */
  --ink-950:  #0a0a0a;   /* primary background */
  --ink-900:  #121212;   /* raised surface */
  --ink-850:  #181818;   /* card surface */
  --ink-800:  #1f1f1f;   /* elevated card / hover */
  --ink-700:  #2a2a2a;   /* hairline-strong / divider */
  --ink-600:  #3a3a3a;   /* border on dark */

  /* — Bone / text on dark — */
  --bone-100: #f4f1ea;   /* primary text, warm white */
  --bone-200: #d8d3c8;   /* secondary text */
  --bone-300: #a8a299;   /* tertiary / muted */
  --bone-400: #6f6a62;   /* faint / disabled */

  /* — Teal signal (primary) — */
  --teal-300: #5cf6d4;
  --teal-400: #00f0b8;   /* PRIMARY brand */
  --teal-500: #00c79a;
  --teal-600: #009a78;
  --teal-glow: rgba(0, 240, 184, 0.28);

  /* — Editorial accents (from imagery) — */
  --ember-400:  #ff4d2e;  /* fire / burning */
  --crimson-500:#b3122b;  /* scarlet / crimson */
  --gold-400:   #d9a441;  /* crystal / candlelight */
  --violet-400: #8a7fd6;  /* crystal queen iridescence */

  /* — Functional — */
  --positive: #00f0b8;
  --negative: #ff4d2e;
  --warning:  #d9a441;

  /* — Overlays / scrims — */
  --scrim-top:    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 45%); /* @kind other */
  --scrim-bottom: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0) 70%); /* @kind other */
  --scrim-read:   linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%); /* @kind other */

  /* — Semantic aliases — */
  --bg-base:        var(--ink-950);
  --bg-raised:      var(--ink-900);
  --surface-card:   var(--ink-850);
  --surface-hover:  var(--ink-800);
  --border-hairline:var(--ink-700);
  --border-strong:  var(--ink-600);

  --text-primary:   var(--bone-100);
  --text-secondary: var(--bone-200);
  --text-muted:     var(--bone-300);
  --text-faint:     var(--bone-400);
  --text-on-teal:   var(--ink-1000);

  --brand:          var(--teal-400);
  --brand-hover:    var(--teal-300);
  --brand-press:    var(--teal-500);
  --focus-ring:     var(--teal-400);
}