/* ==========================================================================
   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-subtle:   #0F1B30;
    --surface-border:   var(--color-navy-soft);
    --surface-hover:    var(--color-navy-elevated);

    /* ── Signal kind accent (stripe + lifecycle track) ────────────────── */
    --signal-accent-entry:    #4FC3C0;
    --signal-accent-exit:     #E0A96D;
    --signal-accent-congress: #818CF8;

    /* ── 9A: price/%gain tint — teal/amber, never red/green ───────────── */
    --signal-price-entry:    #4FC3C0;
    --signal-price-exit:     #E0A96D;
    --signal-price-congress: #A5B4FC;

    /* ── 9A: faint per-kind tint for identity block + header chip/pill ── */
    --signal-tint-entry-block:        #10262B;
    --signal-tint-entry-block-border: #1D4A48;
    --signal-tint-entry-chip:         #14343A;
    --signal-tint-entry-on-chip:      #4FC3C0;
    --signal-tint-entry-pill:         #14343A;
    --signal-tint-entry-on-pill:      #4FC3C0;
    --signal-tint-entry-divider:      #1D4A48;

    --signal-tint-exit-block:        #241C10;
    --signal-tint-exit-block-border: #4A3A1D;
    --signal-tint-exit-chip:         #33260F;
    --signal-tint-exit-on-chip:      #E0A96D;
    --signal-tint-exit-pill:         #33260F;
    --signal-tint-exit-on-pill:      #E0A96D;
    --signal-tint-exit-divider:      #4A3A1D;

    --signal-tint-congress-block:        #1A1A33;
    --signal-tint-congress-block-border: #2E2E5A;
    --signal-tint-congress-chip:         #23234A;
    --signal-tint-congress-on-chip:      #A5B4FC;
    --signal-tint-congress-pill:         #23234A;
    --signal-tint-congress-on-pill:      #A5B4FC;
    --signal-tint-congress-divider:      #2E2E5A;

    /* ── 9A: Início/Fim lifecycle track inset box ─────────────────────── */
    --track-box-bg:          #0F1B30;
    --track-box-border:      #1B2D45;
    --track-base-line:       #2A3F5A;
    --track-empty-dot-border: #3A4F6A;

    /* ── 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);

    /* ── Component — chip (status pill, e.g. congress trade direction) ── */
    --chip-info-bg:      #1e3a5f;
    --chip-info-text:    #93c5fd;
    --chip-warning-bg:   #451a03;
    --chip-warning-text: #fcd34d;
    --chip-success-bg:   #064e3b;
    --chip-success-text: #6ee7b7;
    --chip-danger-bg:    #450a0a;
    --chip-danger-text:  #fca5a5;
  }
}

/* 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-subtle:   #0F1B30;
  --surface-border:   var(--color-navy-soft);
  --surface-hover:    var(--color-navy-elevated);
  --signal-accent-entry:    #4FC3C0;
  --signal-accent-exit:     #E0A96D;
  --signal-accent-congress: #818CF8;
  --signal-price-entry:    #4FC3C0;
  --signal-price-exit:     #E0A96D;
  --signal-price-congress: #A5B4FC;
  --signal-tint-entry-block:        #10262B;
  --signal-tint-entry-block-border: #1D4A48;
  --signal-tint-entry-chip:         #14343A;
  --signal-tint-entry-on-chip:      #4FC3C0;
  --signal-tint-entry-pill:         #14343A;
  --signal-tint-entry-on-pill:      #4FC3C0;
  --signal-tint-entry-divider:      #1D4A48;
  --signal-tint-exit-block:        #241C10;
  --signal-tint-exit-block-border: #4A3A1D;
  --signal-tint-exit-chip:         #33260F;
  --signal-tint-exit-on-chip:      #E0A96D;
  --signal-tint-exit-pill:         #33260F;
  --signal-tint-exit-on-pill:      #E0A96D;
  --signal-tint-exit-divider:      #4A3A1D;
  --signal-tint-congress-block:        #1A1A33;
  --signal-tint-congress-block-border: #2E2E5A;
  --signal-tint-congress-chip:         #23234A;
  --signal-tint-congress-on-chip:      #A5B4FC;
  --signal-tint-congress-pill:         #23234A;
  --signal-tint-congress-on-pill:      #A5B4FC;
  --signal-tint-congress-divider:      #2E2E5A;
  --track-box-bg:          #0F1B30;
  --track-box-border:      #1B2D45;
  --track-base-line:       #2A3F5A;
  --track-empty-dot-border: #3A4F6A;
  --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);

  --chip-info-bg:      #1e3a5f;
  --chip-info-text:    #93c5fd;
  --chip-warning-bg:   #451a03;
  --chip-warning-text: #fcd34d;
  --chip-success-bg:   #064e3b;
  --chip-success-text: #6ee7b7;
  --chip-danger-bg:    #450a0a;
  --chip-danger-text:  #fca5a5;
}