/* ============================================================
   SpaceEmpires – Design Tokens & Theme
   All colors, fonts, spacing etc. live here.
   Change once → applies everywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Exo+2:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  /* ── Colors ── */
  --color-void:        #03040a;       /* deepest background */
  --color-deep:        #060914;       /* panel backgrounds */
  --color-surface:     #0c1228;       /* card/input surfaces */
  --color-border:      #1a2a5e;       /* subtle borders */
  --color-border-glow: #2a4aae;       /* active borders */

  --color-gold:        #c8a84b;       /* primary accent */
  --color-gold-bright: #f0d080;       /* hover/active gold */
  --color-gold-dim:    #6a5420;       /* muted gold */

  --color-cyan:        #00c8ff;       /* secondary accent */
  --color-cyan-dim:    #005577;       /* muted cyan */
  --color-cyan-glow:   rgba(0, 200, 255, 0.15);

  --color-text-primary:   #e8eaf6;
  --color-text-secondary: #7a8cb8;
  --color-text-muted:     #3a4a78;

  --color-success: #00e676;
  --color-error:   #ff4040;
  --color-warning: #ffaa00;

  /* ── Typography ── */
  --font-display: 'Orbitron', monospace;   /* headings, labels */
  --font-body:    'Exo 2', sans-serif;     /* body text, inputs */

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ── Shadows / Glows ── */
  --glow-gold:  0 0 20px rgba(200, 168, 75, 0.4);
  --glow-cyan:  0 0 20px rgba(0, 200, 255, 0.3);
  --glow-error: 0 0 20px rgba(255, 64, 64, 0.4);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 280ms ease;
  --transition-slow:   500ms ease;

  /* ── Z-Index layers ── */
  --z-background: 0;
  --z-canvas:     1;
  --z-overlay:    10;
  --z-panel:      20;
  --z-modal:      30;
  --z-toast:      40;
}