/**
 * World2Blinded - CSS Variables
 * Centralized design tokens for consistency and maintainability
 */

:root {
  /* ═══════════════════════════════════════════
     COLORS
  ═══════════════════════════════════════════ */
  --bg:          #050505;
  --card:        #0A0A0A;
  --card2:       #0F0F0F;
  --gold:        #D4AF37;
  --gold-light:  #F1D06E;
  --gold-dark:   #B8960C;
  --fg:          #F1D06E;
  --muted:       rgba(212, 175, 55, 0.7);

  /* Borders */
  --border:      rgba(212, 175, 55, 0.05);
  --border-gold: rgba(212, 175, 55, 0.2);
  --border-gold-medium: rgba(212, 175, 55, 0.3);
  --border-gold-strong: rgba(212, 175, 55, 0.5);

  /* Status Colors */
  --success:     #4ade80;
  --success-bg:  rgba(34, 197, 94, 0.15);
  --error:       #f87171;
  --error-bg:    rgba(239, 68, 68, 0.15);
  --warning:     #fbbf24;
  --warning-bg:  rgba(234, 179, 8, 0.15);
  --info:        #93c5fd;
  --info-bg:     rgba(59, 130, 246, 0.15);

  /* ═══════════════════════════════════════════
     SPACING (8px base grid)
  ═══════════════════════════════════════════ */
  --space-xs:    0.25rem;   /* 4px */
  --space-sm:    0.5rem;    /* 8px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */

  /* ═══════════════════════════════════════════
     TYPOGRAPHY
  ═══════════════════════════════════════════ */
  --font-sans:   'Manrope', sans-serif;
  --font-serif:  'Playfair Display', serif;

  /* Font Sizes */
  --text-xs:     0.62rem;
  --text-sm:     0.75rem;
  --text-base:   0.88rem;
  --text-lg:     1rem;
  --text-xl:     1.15rem;
  --text-2xl:    1.5rem;
  --text-3xl:    2rem;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;

  /* ═══════════════════════════════════════════
     TRANSITIONS
  ═══════════════════════════════════════════ */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow:   0.4s ease;
  --transition-slower: 0.5s ease;

  /* ═══════════════════════════════════════════
     SHADOWS & EFFECTS
  ═══════════════════════════════════════════ */
  --shadow-gold:      0 8px 20px rgba(212, 175, 55, 0.25);
  --shadow-gold-soft: 0 0 30px rgba(212, 175, 55, 0.08);
  --glow-gold:        0 0 20px rgba(212, 175, 55, 0.3);

  /* ═══════════════════════════════════════════
     LAYOUT
  ═══════════════════════════════════════════ */
  --nav-height:     80px;
  --nav-height-mobile: 65px;
  --sidebar-width:  240px;
  --max-width:      1200px;
  --max-width-sm:   800px;
  --max-width-xs:   560px;

  /* ═══════════════════════════════════════════
     Z-INDEX SCALE
  ═══════════════════════════════════════════ */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-fixed:    1000;
  --z-modal:    9999;
}