/* Gotham Elevator–inspired sandbox theme.
   Loaded after app.css. Sandbox only — public/command/index.html doesn't
   load this file, so production stays gold/navy exactly as before.

   v2 fixes (2026-08-06): v1 redefined the SAME light palette under both
   [data-theme="light"] and [data-theme="dark"], which made dark mode
   render as an all-white page instead of an actual dark theme — wrong,
   dark mode should still look dark. It also lost to app.css's original
   gold/[data-theme="light"] block in some cases because both had equal
   CSS specificity and normal cascade order doesn't reliably guarantee a
   later stylesheet wins across every selector combination. Fixed both
   problems here:
     1. Two real palettes now — light (white bg, near-black text, steel
        blue accent) for [data-theme="light"], and a genuinely dark
        palette (charcoal bg, light text, a brighter blue accent for
        contrast) for the default/[data-theme="dark"] case.
     2. Every custom property is !important, so it always wins regardless
        of selector specificity or which stylesheet loaded first. */

/* ── DARK (default — matches app.css's un-attributed :root, plus the
   explicit [data-theme="dark"] the theme toggle sets) ────────────────── */
:root, [data-theme="dark"] {
  --navy-950: #0A0B0D !important;
  --navy-900: #111214 !important;
  --navy-800: #17181B !important;
  --navy-700: #1D1F23 !important;
  --navy-600: #24262B !important;
  --navy-500: #2C2F35 !important;
  --navy-400: #3A3D44 !important;
  --navy-300: #52565F !important;

  --gold-500: #4A8FD9 !important;
  --gold-400: #6FA8E3 !important;
  --gold-300: #9AC2EC !important;
  --gold-600: #3672B3 !important;
  --gold-glow: rgba(74,143,217,0.15) !important;
  --gold-glow-sm: rgba(74,143,217,0.08) !important;

  --cream-100: #F2F3F5 !important;
  --cream-200: #D5D7DB !important;
  --cream-400: #9A9DA6 !important;
  --cream-600: #7B7E86 !important;
  --cream-800: #3A3D44 !important;

  --navy:        #17181B !important;
  --navy-mid:    #1D1F23 !important;
  --navy-light:  #24262B !important;
  --navy-border: #303338 !important;
  --gold:        #4A8FD9 !important;
  --gold-dim:    #3672B3 !important;
  --cream:       #F2F3F5 !important;
  --cream-dim:   #9A9DA6 !important;
  --white:       #FFFFFF !important;

  --surface-1: rgba(255,255,255,0.03) !important;
  --surface-2: rgba(255,255,255,0.05) !important;
  --surface-3: rgba(255,255,255,0.08) !important;
  --surface-gold: rgba(74,143,217,0.10) !important;

  --shadow-sm:   0 0 0 1px rgba(255,255,255,0.08) !important;
  --shadow-md:   0 0 0 1px rgba(255,255,255,0.10) !important;
  --shadow-lg:   0 0 0 1px rgba(255,255,255,0.12) !important;
  --shadow-xl:   0 0 0 1px rgba(255,255,255,0.14) !important;
  --shadow-gold: 0 0 0 1px rgba(74,143,217,0.4) !important;
  --shadow-inset: none !important;

  --radius-sm: 2px !important;
  --radius-md: 3px !important;
  --radius-lg: 5px !important;
  --radius-xl: 6px !important;
}

/* ── LIGHT ([data-theme="light"], set explicitly by the theme toggle) ── */
[data-theme="light"] {
  --navy-950: #F4F4F5 !important;
  --navy-900: #FFFFFF !important;
  --navy-800: #FFFFFF !important;
  --navy-700: #F7F7F8 !important;
  --navy-600: #EDEDEF !important;
  --navy-500: #E1E1E4 !important;
  --navy-400: #C7C7CC !important;
  --navy-300: #9A9AA1 !important;

  --gold-500: #2B5C96 !important;
  --gold-400: #3B72B3 !important;
  --gold-300: #6E96C6 !important;
  --gold-600: #1F4570 !important;
  --gold-glow: rgba(43,92,150,0.10) !important;
  --gold-glow-sm: rgba(43,92,150,0.06) !important;

  --cream-100: #16171B !important;
  --cream-200: #303136 !important;
  --cream-400: #55565C !important;
  --cream-600: #74757C !important;
  --cream-800: #C7C7CC !important;

  --navy:        #FFFFFF !important;
  --navy-mid:    #F7F7F8 !important;
  --navy-light:  #EDEDEF !important;
  --navy-border: #D5D5D9 !important;
  --gold:        #2B5C96 !important;
  --gold-dim:    #1F4570 !important;
  --cream:       #16171B !important;
  --cream-dim:   #55565C !important;
  --white:       #FFFFFF !important;

  --surface-1: rgba(0,0,0,0.025) !important;
  --surface-2: rgba(0,0,0,0.04) !important;
  --surface-3: rgba(0,0,0,0.06) !important;
  --surface-gold: rgba(43,92,150,0.06) !important;

  --shadow-sm:   0 0 0 1px rgba(0,0,0,0.07) !important;
  --shadow-md:   0 0 0 1px rgba(0,0,0,0.09) !important;
  --shadow-lg:   0 0 0 1px rgba(0,0,0,0.11) !important;
  --shadow-xl:   0 0 0 1px rgba(0,0,0,0.13) !important;
  --shadow-gold: 0 0 0 1px rgba(43,92,150,0.35) !important;
  --shadow-inset: none !important;

  --radius-sm: 2px !important;
  --radius-md: 3px !important;
  --radius-lg: 5px !important;
  --radius-xl: 6px !important;
}

/* Kill the gold glow/blur that reads as "dashboard," not "site" — same in
   both themes, just picks up whichever palette's tokens are active. */
.logo-mark { text-shadow: none !important; }
.app-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--navy-800) !important;
  border-bottom: 1px solid var(--navy-border) !important;
  box-shadow: none !important;
}
.sidebar {
  background: var(--navy-800) !important;
  border-right: 1px solid var(--navy-border) !important;
}
.header-logo { border-right: 1px solid var(--navy-border) !important; }
.nav-divider { background: var(--navy-border) !important; }