/* =============================================================================
   SISME GAMES — Design Tokens
   ============================================================================= */

:root {

  /* COLORS — Background */
  --color-bg-base:      #070e1a;
  --color-bg-surface:   #0d1626;
  --color-bg-card:      #111e33;
  --color-bg-elevated:  #172540;
  --color-bg-overlay:   rgba(7, 14, 26, 0.85);

  /* COLORS — Borders */
  --color-border-subtle:  #1a2e4a;
  --color-border-default: #243d5e;
  --color-border-strong:  #2e5070;
  --color-border-gold:    #6b4e1e;

  /* COLORS — Gold */
  --color-gold-950:   #2a1a05;
  --color-gold-800:   #5a3a10;
  --color-gold-600:   #8a5c20;
  --color-gold-400:   #c89b3c;
  --color-gold-300:   #d4ae5a;
  --color-gold-200:   #e8cb82;
  --color-gold-100:   #f5e4b8;

  /* COLORS — Blue */
  --color-blue-900:   #04111f;
  --color-blue-700:   #0a2a44;
  --color-blue-500:   #0e4a78;
  --color-blue-400:   #1a7ab0;
  --color-blue-300:   #2b9ed4;
  --color-blue-200:   #5ec4e8;
  --color-blue-100:   #a8dff5;

  /* COLORS — Text */
  --color-text-primary:   #e8dcc8;
  --color-text-secondary: #a89878;
  --color-text-muted:     #5a4e3a;
  --color-text-inverse:   #0d1626;
  --color-text-link:      #2b9ed4;
  --color-text-link-hover:#5ec4e8;

  /* COLORS — Status */
  --color-success:          #2a6b3e;
  --color-success-light:    #3d9b59;
  --color-success-surface:  rgba(42, 107, 62, 0.12);
  --color-error:            #8b2020;
  --color-error-light:      #c43030;
  --color-error-surface:    rgba(139, 32, 32, 0.12);
  --color-warning:          #9b6a10;
  --color-warning-light:    #c89b3c;
  --color-warning-surface:  rgba(155, 106, 16, 0.12);

  /* COLORS — Surfaces (overlays avec alpha) */
  --color-blue-surface:     rgba(14, 74, 120, 0.15);
  --color-white-subtle:     rgba(255, 255, 255, 0.02);

  /* TYPOGRAPHY */
  --font-display: 'Cinzel', serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;

  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

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

  /* BORDER RADIUS */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  10px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.8);
  --shadow-gold: 0 0 20px rgba(200, 155, 60, 0.35);
  --shadow-blue: 0 0 20px rgba(94, 196, 232, 0.3);

  /* TRANSITIONS */
  --transition-fast:  100ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  350ms ease;
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-INDEX */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* LAYOUT */
  --container-lg: 1024px;
  --nav-height:   64px;
}