/* ==========================================================================
   dark.css — Kai-Signals dark mode surface/text overrides
   Applied via [data-theme="dark"] attribute (JS toggle) AND
   @media (prefers-color-scheme: dark) for users with no JS preference saved.
   ========================================================================== */

/* OS-level dark preference (no JS required) */
@media (prefers-color-scheme: dark) {
  :root {
    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --surface-page:     var(--color-navy-base);
    --surface-raised:   var(--color-navy-surface);
    --surface-overlay:  var(--color-navy-elevated);
    --surface-sunken:   #080E1B;
    --surface-border:   var(--color-navy-soft);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text-primary:   #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary:  #6B7280;
    --text-inverse:   var(--color-navy-base);
    --text-brand:     var(--color-brand-teal);
    --text-link:      var(--color-brand-teal);
    --text-link-hover: #5DC9C6;

    /* ── Component — button primary ──────────────────────────────────── */
    --btn-primary-bg:       var(--color-brand-teal);
    --btn-primary-bg-hover: #5DC9C6;
    --btn-primary-text:     var(--color-navy-base);

    /* ── Component — button secondary ───────────────────────────────── */
    --btn-secondary-bg:       transparent;
    --btn-secondary-border:   var(--color-brand-teal);
    --btn-secondary-text:     var(--color-brand-teal);
    --btn-secondary-bg-hover: var(--color-brand-teal-dim);

    /* ── Component — card ────────────────────────────────────────────── */
    --card-bg:     var(--color-navy-surface);
    --card-border: var(--color-navy-soft);
    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);

    /* ── Component — input ───────────────────────────────────────────── */
    --input-bg:           var(--color-navy-surface);
    --input-border:       var(--color-navy-soft);
    --input-border-focus: var(--color-brand-teal);
    --input-text:         var(--text-primary);
    --input-placeholder:  var(--text-tertiary);

    /* ── Component — navbar ──────────────────────────────────────────── */
    --nav-bg:         var(--color-navy-base);
    --nav-border:     var(--color-navy-soft);
    --nav-text:       var(--text-primary);
    --nav-text-muted: var(--text-secondary);

    /* ── Component — badge ───────────────────────────────────────────── */
    --badge-brand-bg:   var(--color-brand-teal-dim);
    --badge-brand-text: var(--color-brand-teal);
  }
}

/* Explicit :root[data-theme="dark"] (JS toggle wins over media query) */
:root[data-theme="dark"] {
  --surface-page:     var(--color-navy-base);
  --surface-raised:   var(--color-navy-surface);
  --surface-overlay:  var(--color-navy-elevated);
  --surface-sunken:   #080E1B;
  --surface-border:   var(--color-navy-soft);
  --text-primary:     #F9FAFB;
  --text-secondary:   #D1D5DB;
  --text-tertiary:    #6B7280;
  --text-inverse:     var(--color-navy-base);
  --text-brand:       var(--color-brand-teal);
  --text-link:        var(--color-brand-teal);
  --text-link-hover:  #5DC9C6;
  --btn-primary-bg:         var(--color-brand-teal);
  --btn-primary-bg-hover:   #5DC9C6;
  --btn-primary-text:       var(--color-navy-base);
  --btn-secondary-bg:       transparent;
  --btn-secondary-border:   var(--color-brand-teal);
  --btn-secondary-text:     var(--color-brand-teal);
  --btn-secondary-bg-hover: var(--color-brand-teal-dim);
  --card-bg:     var(--color-navy-surface);
  --card-border: var(--color-navy-soft);
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --input-bg:           var(--color-navy-surface);
  --input-border:       var(--color-navy-soft);
  --input-border-focus: var(--color-brand-teal);
  --input-text:         #F9FAFB;
  --input-placeholder:  #6B7280;
  --nav-bg:         var(--color-navy-base);
  --nav-border:     var(--color-navy-soft);
  --nav-text:       #F9FAFB;
  --nav-text-muted: #D1D5DB;
  --badge-brand-bg:   var(--color-brand-teal-dim);
  --badge-brand-text: var(--color-brand-teal);
}