/* ================================================================
   FORGE DESIGN SYSTEM — LIGHT / DARK MODE MAPPING
   Last deployed: 2026-02-24
   Maps private palette raw vars to semantic tokens
   ================================================================ */

/* --- SYSTEM PREFERENCE DEFAULTS (no explicit data-mode set) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:        var(--_dark-bg);
    --bg-surface:        var(--_dark-surface);
    --bg-surface-hover:  var(--_dark-surface-hover);
    --bg-surface-alt:    var(--_dark-surface-alt);

    --text-primary:      var(--_text-light);
    --text-secondary:    var(--_text-light-soft);
    --text-muted:        var(--_text-light-muted);
    --text-faint:        var(--_text-light-faint);

    --border-color:      rgba(255,255,255,0.07);
    --border-subtle:     rgba(255,255,255,0.05);
    --border-strong:     rgba(255,255,255,0.12);

    --card-shadow:       rgba(0,0,0,0.4);
    --card-shadow-hover: rgba(0,0,0,0.55);

    --settings-bg:       rgba(0,0,0,0.55);
    --settings-border:   rgba(255,255,255,0.07);
    --settings-text:     rgba(245,247,250,0.55);
    --settings-text-hover: rgba(245,247,250,0.9);
    --settings-control-bg: rgba(255,255,255,0.06);
    --settings-control-border: rgba(255,255,255,0.12);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary:        var(--_light-bg);
    --bg-surface:        var(--_light-surface);
    --bg-surface-hover:  var(--_light-surface-hover);
    --bg-surface-alt:    var(--_light-surface-alt);

    --text-primary:      var(--_text-dark);
    --text-secondary:    var(--_text-dark-soft);
    --text-muted:        var(--_text-dark-muted);
    --text-faint:        var(--_text-dark-faint);

    --border-color:      rgba(0,0,0,0.08);
    --border-subtle:     rgba(0,0,0,0.05);
    --border-strong:     rgba(0,0,0,0.14);

    --card-shadow:       rgba(0,0,0,0.10);
    --card-shadow-hover: rgba(0,0,0,0.18);

    --settings-bg:       rgba(255,255,255,0.92);
    --settings-border:   rgba(0,0,0,0.08);
    --settings-text:     rgba(28,32,40,0.55);
    --settings-text-hover: rgba(28,32,40,0.9);
    --settings-control-bg: rgba(0,0,0,0.05);
    --settings-control-border: rgba(0,0,0,0.14);
  }
}

/* --- DARK MODE (explicit override) --- */
[data-mode="dark"] {
  --bg-primary:        var(--_dark-bg);
  --bg-surface:        var(--_dark-surface);
  --bg-surface-hover:  var(--_dark-surface-hover);
  --bg-surface-alt:    var(--_dark-surface-alt);

  --text-primary:      var(--_text-light);
  --text-secondary:    var(--_text-light-soft);
  --text-muted:        var(--_text-light-muted);
  --text-faint:        var(--_text-light-faint);

  --border-color:      rgba(255,255,255,0.07);
  --border-subtle:     rgba(255,255,255,0.05);
  --border-strong:     rgba(255,255,255,0.12);

  --card-shadow:       rgba(0,0,0,0.4);
  --card-shadow-hover: rgba(0,0,0,0.55);

  --settings-bg:       rgba(0,0,0,0.55);
  --settings-border:   rgba(255,255,255,0.07);
  --settings-text:     rgba(245,247,250,0.55);
  --settings-text-hover: rgba(245,247,250,0.9);
  --settings-control-bg: rgba(255,255,255,0.06);
  --settings-control-border: rgba(255,255,255,0.12);
}

/* --- LIGHT MODE --- */
[data-mode="light"] {
  --bg-primary:        var(--_light-bg);
  --bg-surface:        var(--_light-surface);
  --bg-surface-hover:  var(--_light-surface-hover);
  --bg-surface-alt:    var(--_light-surface-alt);

  --text-primary:      var(--_text-dark);
  --text-secondary:    var(--_text-dark-soft);
  --text-muted:        var(--_text-dark-muted);
  --text-faint:        var(--_text-dark-faint);

  --border-color:      rgba(0,0,0,0.08);
  --border-subtle:     rgba(0,0,0,0.05);
  --border-strong:     rgba(0,0,0,0.14);

  --card-shadow:       rgba(0,0,0,0.10);
  --card-shadow-hover: rgba(0,0,0,0.18);

  --settings-bg:       rgba(255,255,255,0.92);
  --settings-border:   rgba(0,0,0,0.08);
  --settings-text:     rgba(28,32,40,0.55);
  --settings-text-hover: rgba(28,32,40,0.9);
  --settings-control-bg: rgba(0,0,0,0.05);
  --settings-control-border: rgba(0,0,0,0.14);
}
