/* ============================================================
   P77PLAY — DESIGN TOKENS
   Dark arcade-noir with neon gold accents
   ============================================================ */
:root {
  /* ---- Color ---- */
  --color-bg-primary:      #0A0A0F;   /* near-black base */
  --color-bg-secondary:    #13131C;   /* card / section background */
  --color-bg-tertiary:     #1C1C2A;   /* elevated surface */
  --color-accent-gold:     #F0B429;   /* neon gold – primary CTA */
  --color-accent-gold-dim: #C98D14;   /* hover state */
  --color-accent-blue:     #3B82F6;   /* secondary accent */
  --color-telegram:        #2BA5E1;   /* telegram brand */
  --color-telegram-hover:  #229ED9;
  --color-neon-green:      #22D3A0;   /* live / online indicator */
  --color-text-primary:    #F5F5F5;
  --color-text-secondary:  #A0A0B0;
  --color-text-muted:      #6B6B80;
  --color-border:          rgba(240, 180, 41, 0.15);
  --color-border-strong:   rgba(240, 180, 41, 0.35);
  --color-danger:          #EF4444;

  /* ---- Typography ---- */
  --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ---- Spacing Scale ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 100px;

  /* ---- Shadows ---- */
  --shadow-glow-gold: 0 0 20px rgba(240, 180, 41, 0.30);
  --shadow-glow-blue: 0 0 20px rgba(43, 165, 225, 0.35);
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.40);
  --shadow-elevated:  0 8px 40px rgba(0, 0, 0, 0.60);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --nav-height:    72px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s var(--ease-out);
}