/* ============================================================
   WARGAME CAFÉ — Design Tokens
   Dark Tactical Luxury
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Agne';
  src: url('/Agne-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — basada en logo oficial (#C8921A dorado ámbar) */
  --wg-bg:        #0A0A0F;
  --wg-surface:   #12121A;
  --wg-surface-2: #1A1A26;
  --wg-border:    #1E1E2E;
  --wg-border-2:  #2A2A3E;
  --wg-accent:    #C8921A;
  --wg-accent-dim:#96690F;
  --wg-accent-2:  #8B0000;
  --wg-text:      #E8E8F0;
  --wg-muted:     #6B6B80;
  --wg-muted-2:   #4A4A60;
  --wg-success:   #2D6A4F;
  --wg-danger:    #C62828;

  /* Typography */
  --font-display: 'Agne', 'Oswald', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing scale (8px base) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;

  /* Border radius */
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  8px;

  /* Shadows */
  --shadow-glow-gold: 0 0 20px rgba(200,146,26,0.25), 0 0 40px rgba(200,146,26,0.10);
  --shadow-card:      0 4px 24px rgba(0,0,0,0.6);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   350ms;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;
  --z-preloader:999;
}