/* ==========================================================================
   variables.css — Design tokens for Novex Empire UI
   Glassmorphism dark theme with mint/orange/purple accents
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     Legacy variables (kept for backward compatibility with existing code)
     --------------------------------------------------------------------------- */
  --primary: #0b7f75;
  --primary-light: #0ea597;
  --accent: #d97706;
  --accent-light: #f59e0b;
  --dark: #1c1917;
  --dark-mid: #292524;
  --dark-light: #44403c;
  --light: #fafaf9;
  --light-dim: #e7e5e4;
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --menu-bg: #111113;
  --menu-bg-end: #1a1a1f;
  --menu-surface: #1e1e24;
  --menu-border: #2a2a32;
  --menu-text: #e8e6e3;
  --menu-text-dim: #8a8a95;
  --menu-text-muted: #5a5a65;
  --gold: #d4a017;

  /* ---------------------------------------------------------------------------
     Color Palette
     --------------------------------------------------------------------------- */

  /* Backgrounds */
  --bg: #12141a;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.10);

  /* Brand */
  --color-primary: #00d4aa;
  --color-secondary: #ff8c42;
  --color-accent: #7c6aff;

  /* Semantic */
  --color-cash: #ffd700;
  --color-success: #34d399;
  --color-danger: #ff5757;

  /* Text */
  --text-primary: #f0f0f0;
  --text-secondary: #8b92a5;

  /* ---------------------------------------------------------------------------
     Glass & Depth
     --------------------------------------------------------------------------- */
  --glass-bg: rgba(18, 20, 30, 0.85);
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.05);
  --elevation-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glow-primary: 0 0 20px rgba(0, 212, 170, 0.15);
  --glow-cash: 0 0 16px rgba(255, 215, 0, 0.25);
  --glow-accent: 0 0 16px rgba(124, 106, 255, 0.2);

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---------------------------------------------------------------------------
     Border Radius
     --------------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     Z-Index Layers
     --------------------------------------------------------------------------- */
  --z-canvas: 0;
  --z-hud: 100;
  --z-panel: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ---------------------------------------------------------------------------
     Spacing & Layout
     --------------------------------------------------------------------------- */
  --hud-height: 78px;
  --toolbar-height: 96px;
  --panel-width: 400px;

  /* ---------------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ---------------------------------------------------------------------------
     Safe Area Insets (for notched/rounded phones)
     --------------------------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Compact layout variables for landscape phones */
@media (max-height: 500px) and (max-width: 1024px) {
  :root {
    --hud-height: 40px;
    --toolbar-height: 52px;
  }
}