/* =========================================================
   WX Viewer — Design Tokens
   Single canonical source for colors, type, spacing, radii,
   shadows, and z-index. Loaded BEFORE all other stylesheets;
   every other sheet consumes these via var(--*).
   ========================================================= */

:root {
  /* ── Surfaces (broadcast navy) ──────────────────────── */
  --bg-deep:       #050916;
  --bg:            #07111f;
  --bg2:           #0d1a2d;
  --bg3:           #14243a;
  --bg-raised:     #1c304d;

  /* ── Accents ────────────────────────────────────────── */
  --accent:        #52d7ff;
  --accent-bright: #9beaff;
  --accent-dim:    rgba(82, 215, 255, 0.44);
  --accent-bg:     rgba(82, 215, 255, 0.11);
  --accent-2:      #8d7dff;
  --accent-3:      #ffcc66;
  --accent-grad:   linear-gradient(135deg, #52d7ff 0%, #8d7dff 54%, #ffcc66 100%);
  --accent-glow:   0 0 0 1px rgba(82, 215, 255, 0.24),
                   0 18px 42px -24px rgba(82, 215, 255, 0.78);

  /* ── Status ─────────────────────────────────────────── */
  --hot:           #ffb257;
  --hot-dim:       rgba(255, 178, 87, 0.14);
  --danger:        #ff4d6d;
  --warn:          #ffd166;
  --ok:            #46d98a;

  /* ── Text ───────────────────────────────────────────── */
  --text:          #dde8f6;
  --text-mid:      #9baec5;
  --text-dim:      #63758c;

  /* ── Borders ────────────────────────────────────────── */
  --border:        rgba(226, 242, 255, 0.11);
  --border-subtle: rgba(226, 242, 255, 0.055);
  --border-strong: rgba(226, 242, 255, 0.2);

  /* ── Typography ─────────────────────────────────────── */
  --font-data:     'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-ui:       'Inter', -apple-system, 'Segoe UI', sans-serif;
  --text-xs:       11px;
  --text-sm:       12px;
  --text-md:       13px;
  --text-lg:       15px;
  --text-xl:       18px;

  /* ── Spacing (4pt scale) ────────────────────────────── */
  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       24px;
  --space-6:       32px;
  --space-7:       40px;
  --space-8:       48px;

  /* ── Radii ──────────────────────────────────────────── */
  --radius:        7px;
  --radius-lg:     12px;
  --radius-xl:     16px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md:     0 16px 36px -22px rgba(0, 0, 0, 0.78),
                   0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-lg:     0 28px 70px -30px rgba(0, 0, 0, 0.86),
                   0 5px 18px rgba(0, 0, 0, 0.5);

  /* ── Layout ─────────────────────────────────────────── */
  --topbar-h:      48px;
  --sidebar-w:     302px;
  --safe-t:        env(safe-area-inset-top, 0px);
  --safe-b:        env(safe-area-inset-bottom, 0px);

  /* ── Z-index scale ──────────────────────────────────── */
  --z-base:        1;
  --z-panel:       600;
  --z-topbar:      1000;
  --z-overlay:     1200;
  --z-modal:       2000;
  --z-toast:       3000;
}