/* ================================================================
   Solo — DARK THEME tokens ("Dusk")
   Loads AFTER variables.css; overrides tokens under
   html[data-theme="dark"]. Activation is decided in the pre-paint
   bootstrap in index.html (user setting in ss_settings.appearance:
   auto | light | dark; auto follows prefers-color-scheme), so the
   first paint is already the right theme — no flash.

   Derived from the approved "Lumen · Dusk" prototype direction.
   ================================================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* ── Surfaces ───────────────────────────────────────────── */
  --bg:              #15110C;
  --bg-deep:         #0F0C08;
  --surface:         #251F17;
  --surface-2:       #2D261C;
  --bg-overlay:      rgba(0, 0, 0, 0.55);

  /* ── Borders ────────────────────────────────────────────── */
  --line:            rgba(255, 255, 255, 0.10);
  --border-light:    rgba(255, 255, 255, 0.18);

  /* ── Text (cream ramp) ──────────────────────────────────── */
  --ink:             #F4ECE0;
  --ink-2:           #CFC5B2;
  --ink-3:           #9C9180;
  --text-inverse:    #1F1B16;

  /* ── Accent (coral, slightly lifted for dark) ───────────── */
  --accent:          #E58263;
  --accent-ink:      #EFA181;   /* light coral replaces deep rust */
  --accent-soft:     rgba(224, 120, 86, 0.18);
  --primary-glow:    rgba(224, 120, 86, 0.24);

  /* ── Buttons: primary (was ink) flips to cream ──────────── */
  /* Rules pairing var(--primary)/var(--ink) backgrounds with white
     text must use var(--text-inverse) instead — audited in the
     component sheets. */
  --primary:         #F4ECE0;
  --primary-hover:   #FFF8EB;
  --cta:             #E07856;
  --cta-hover:       #E58263;
  --cta-soft:        rgba(224, 120, 86, 0.18);

  /* ── Status ─────────────────────────────────────────────── */
  --good:            #7FA68C;
  --good-ink:        #9FC4AB;   /* light sage replaces deep green */
  --good-soft:       rgba(127, 166, 140, 0.16);
  --warn:            #D9A441;
  --warn-soft:       rgba(217, 164, 65, 0.16);
  --orange-glow:     rgba(217, 164, 65, 0.22);
  --red:             #D96A62;
  --red-soft:        rgba(217, 106, 98, 0.14);
  --purple:          #A98FCB;
  --purple-soft:     rgba(169, 143, 203, 0.14);

  /* ── Card glows (same hues, tuned for black) ────────────── */
  --glow-switch:     0 0 0 1.5px rgba(224, 120, 86, 0.65), 0 12px 32px rgba(0, 0, 0, 0.45);
  --glow-progress:   0 0 0 1.5px rgba(127, 166, 140, 0.50), 0 8px 24px rgba(0, 0, 0, 0.35);
  --glow-optimised:  0 0 0 1.5px rgba(127, 166, 140, 0.50), 0 8px 24px rgba(0, 0, 0, 0.35);
  --glow-issue:      0 0 0 1.5px rgba(217, 106, 98, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
  --glow-neutral:    0 0 0 1px var(--line);
  --shadow-rec:      0 0 0 6px rgba(224, 120, 86, 0.14), 0 24px 56px rgba(0, 0, 0, 0.45);

  /* ── Shadows (black-based) ──────────────────────────────── */
  --shadow-card:     0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-tab:      0 16px 40px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-xl:       0 12px 40px rgba(0, 0, 0, 0.50);
}

/* ── Ambient wash (the "lumen field", CSS-only, static) ──────
   Soft warm glow behind everything. Painted at z-index -1 so it
   sits above body's own background but below ALL content — text
   never gets tinted, and transparent-background sections let it
   glow through. pointer-events: none keeps taps working. */
html[data-theme="dark"] body::before {
  content: ''; position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 36% at 86% -6%, rgba(224, 120, 86, 0.16), transparent 70%),
    radial-gradient(46% 40% at -8% 100%, rgba(127, 166, 140, 0.10), transparent 70%),
    radial-gradient(30% 26% at 40% 44%, rgba(217, 164, 65, 0.06), transparent 70%);
}