/* ============================================================
   STELLAR EMPIRES - VARIABLES CSS
   Design System v1.0
   ============================================================ */

:root {
  /* ---- COLORES PRIMARIOS ---- */
  --color-bg-darkest:   #03040a;
  --color-bg-dark:      #070b18;
  --color-bg-mid:       #0d1526;
  --color-bg-light:     #131e35;
  --color-bg-panel:     rgba(13, 21, 38, 0.85);
  --color-bg-card:      rgba(19, 30, 53, 0.7);
  --color-bg-hover:     rgba(30, 50, 90, 0.6);

  /* ---- COLORES ACENTO ---- */
  --color-accent-blue:    #3b82f6;
  --color-accent-blue-glow: rgba(59, 130, 246, 0.4);
  --color-accent-cyan:    #06b6d4;
  --color-accent-cyan-glow: rgba(6, 182, 212, 0.35);
  --color-accent-purple:  #8b5cf6;
  --color-accent-purple-glow: rgba(139, 92, 246, 0.4);
  --color-accent-gold:    #f59e0b;
  --color-accent-gold-glow: rgba(245, 158, 11, 0.4);

  /* ---- RECURSOS ---- */
  --color-titanio:      #64B5F6;
  --color-cristal:      #CE93D8;
  --color-plasma:       #4DD0E1;
  --color-energia:      #FFD54F;
  --color-dark-matter:  #FF6F61;

  /* ---- ESTADO ---- */
  --color-success:      #22c55e;
  --color-warning:      #f59e0b;
  --color-danger:       #ef4444;
  --color-info:         #3b82f6;

  /* ---- TEXTO ---- */
  --color-text-primary:   #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #475569;
  --color-text-accent:    #7dd3fc;
  --color-text-gold:      #fcd34d;

  /* ---- BORDES ---- */
  --color-border-dim:    rgba(59, 130, 246, 0.15);
  --color-border-mid:    rgba(59, 130, 246, 0.3);
  --color-border-bright: rgba(59, 130, 246, 0.6);
  --color-border-glow:   rgba(59, 130, 246, 0.8);

  /* ---- GLASSMORPHISM ---- */
  --glass-bg:            rgba(13, 21, 38, 0.6);
  --glass-bg-hover:      rgba(13, 21, 38, 0.8);
  --glass-border:        rgba(99, 179, 237, 0.2);
  --glass-blur:          blur(16px);
  --glass-blur-heavy:    blur(32px);

  /* ---- TIPOGRAFIA ---- */
  --font-primary:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display:   'Exo 2', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:   0.70rem;
  --font-size-sm:   0.80rem;
  --font-size-base: 0.9rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ---- ESPACIADO ---- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ---- BORDER RADIUS ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- SOMBRAS ---- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.7);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.8);
  --shadow-glow-blue:   0 0 20px rgba(59,130,246,0.5), 0 0 60px rgba(59,130,246,0.2);
  --shadow-glow-cyan:   0 0 20px rgba(6,182,212,0.5),  0 0 60px rgba(6,182,212,0.2);
  --shadow-glow-purple: 0 0 20px rgba(139,92,246,0.5), 0 0 60px rgba(139,92,246,0.2);
  --shadow-glow-gold:   0 0 20px rgba(245,158,11,0.5), 0 0 60px rgba(245,158,11,0.2);

  /* ---- TRANSICIONES ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- LAYOUT ---- */
  --sidebar-width:       240px;
  --sidebar-collapsed:   64px;
  --topbar-height:       60px;
  --resource-bar-height: 52px;
  --content-max-width:   1400px;

  /* ---- Z-INDEX ---- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}