/* ═══════════════════════════════════════════════════════════════
   LESHGO FIGHT CENTRE — Design Tokens
   Dark fight-night aesthetic. Thai temple heritage. Premium, raw.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand palette ── */
  --charcoal:    #0A0A0A;
  --charcoal-2:  #111111;
  --warm-grey:   #1A0F08;
  --warm-grey-2: #221610;
  --ember:       #E85D04;
  --ember-hot:   #FF6B1A;
  --gold:        #C9962D;
  --gold-light:  #E0AE3F;
  --amber:       #F59E0B;
  --cream:       #F0E6D2;
  --white:       #FFFFFF;
  --spark:       #FF6B1A;
  --rust:        #7A2E0E;

  /* ── Surfaces ── */
  --bg:          var(--charcoal);
  --surface:     var(--warm-grey);
  --surface-2:   var(--warm-grey-2);
  --card:        #15100B;

  /* ── Text ── */
  --text:        var(--cream);
  --body:        rgba(240, 230, 210, 0.78);
  --muted:       rgba(240, 230, 210, 0.55);
  --faint:       rgba(240, 230, 210, 0.32);

  /* ── Borders ── */
  --border:        rgba(240, 230, 210, 0.10);
  --border-strong: rgba(240, 230, 210, 0.22);
  --border-ember:  rgba(232, 93, 4, 0.35);
  --border-gold:   rgba(201, 150, 45, 0.40);

  /* ── Glows ── */
  --glow-ember:  0 0 0 1px rgba(232, 93, 4, 0.35), 0 12px 40px rgba(232, 93, 4, 0.30), 0 0 80px rgba(232, 93, 4, 0.15);
  --glow-gold:   0 0 0 1px rgba(201, 150, 45, 0.30), 0 8px 32px rgba(201, 150, 45, 0.18);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);

  /* ── Typography ── */
  --font-display: 'Anton', 'Bebas Neue', 'Oswald', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Layout ── */
  --nav-height:    72px;
  --section-pad:   clamp(72px, 9vw, 128px);
  --container:     1240px;
  --container-pad: clamp(20px, 4vw, 56px);

  /* ── Radii ── */
  --radius:    4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}