/* =====================================================================
   Midnight theme — deeper than the default dark, almost OLED-friendly.
   Pure black backgrounds with the same orange accent; surface layers
   step up gradually so cards still read as floating, not as part of
   the void.
   ===================================================================== */
:root[data-theme="midnight"] {
    --surface-app:          #000000;
    --surface-app-rgb:      0, 0, 0;
    --surface-sidebar:      #050507;
    --surface-card:         #0c0c12;
    --surface-card-hover:   #14141c;
    --surface-elevated:     #161620;
    --surface-overlay:      rgba(0, 0, 0, 0.85);
    --surface-player:       #050507;

    --text-primary:         #ffffff;
    --text-secondary:       #a0a0b0;
    --text-muted:           #5a5a6a;
    --text-on-accent:       #ffffff;

    --border-subtle:        #1a1a26;
    --border-strong:        #2a2a3a;
    --border-focus:         #ff6b35;

    --accent-primary:       #ff6b35;
    --accent-secondary:     var(--accent-primary);
    --accent-purple:        #b97aff;
    --accent-cyan:          #00f5d4;
    --accent-primary-rgb:   255, 107, 53;
    --accent-secondary-rgb: var(--accent-primary-rgb);
    --accent-purple-rgb:    185, 122, 255;
    --accent-cyan-rgb:      0, 245, 212;
    --accent-gradient:      linear-gradient(135deg,
                                color-mix(in srgb, var(--accent-primary) 100%, white 18%),
                                var(--accent-primary));

    --state-success:        #3fa862;
    --state-warning:        #f7c548;
    --state-danger:         #d04a4a;
    --state-info:           #4a90d0;

    /* Shadows — heavier than default dark, since pure-black backgrounds
       need a more pronounced shadow to read as elevation. */
    --shadow-sm:            0 2px 10px rgba(0, 0, 0, 0.55);
    --shadow-md:            0 10px 28px rgba(0, 0, 0, 0.70);
    --shadow-lg:            0 24px 72px rgba(0, 0, 0, 0.85);

    --overlay-hover:        rgba(255, 255, 255, 0.05);
    --overlay-active:       rgba(255, 255, 255, 0.10);
    --overlay-selected:     rgba(255, 255, 255, 0.07);

    --bg-dark:              var(--surface-app);
    --bg-sidebar:           var(--surface-sidebar);
    --bg-card:              var(--surface-card);
    --bg-card-hover:        var(--surface-card-hover);
}