/* ============================================
   Design Tokens — Poker Portal Theme
   ============================================ */

:root {
  /* ── Colors ── */
  --color-bg-deep:         #0a0e17;
  --color-bg-surface:      rgba(15, 22, 36, 0.85);
  --color-bg-card:         rgba(20, 28, 45, 0.7);
  --color-felt:            #1a5c3a;
  --color-felt-deep:       #0d3321;
  --color-felt-light:      #2a7a4e;
  --color-gold:            #d4a843;
  --color-gold-light:      #f0d078;
  --color-gold-dim:        #a07830;
  --color-red:             #c0392b;
  --color-red-light:       #e74c3c;
  --color-black-suit:      #1a1a2e;
  --color-text-primary:    #f0ece4;
  --color-text-secondary:  #9a978e;
  --color-text-muted:      #5a5850;
  --color-glass:           rgba(255, 255, 255, 0.06);
  --color-glass-strong:    rgba(255, 255, 255, 0.10);
  --color-glass-border:    rgba(255, 255, 255, 0.12);
  --color-glass-highlight: rgba(255, 255, 255, 0.18);
  --color-glass-glow:      rgba(212, 168, 67, 0.15);

  /* ── Typography ── */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:   'Cinzel', 'Playfair Display', serif;

  --fs-1: 0.875rem;   /* 14 */
  --fs-2: 1rem;       /* 16 */
  --fs-3: 1.25rem;    /* 20 */
  --fs-4: 1.75rem;    /* 28 */
  --fs-5: 2.5rem;     /* 40 */
  --fs-6: 3.5rem;     /* 56 */
  --fs-7: 4.5rem;     /* 72 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-body:     1.6;
  --lh-heading:  1.15;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-mega:     0.2em;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ── Layout ── */
  --header-height: 72px;
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 24px rgba(212, 168, 67, 0.3);
  --shadow-glow: 0 0 60px rgba(212, 168, 67, 0.15);

  /* ── Animation ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast:   0.2s;
  --duration-normal: 0.4s;
  --duration-slow:   0.8s;
  --duration-slower: 1.2s;

  /* ── Z-index ── */
  --z-base:     1;
  --z-above:    10;
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-particle: -1;
}

/* ── Responsive font scaling ── */
@media (max-width: 768px) {
  :root {
    --fs-5: 1.75rem;
    --fs-6: 2.25rem;
    --fs-7: 3rem;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
  }
}