/* ============================================================
   tokens.css — MOTM Design System
   Movement On The Mountain Music Festival
   Single source of truth for all CSS custom properties.
   ALL other CSS files must reference tokens from this file only.
   No hex values may appear in any other stylesheet.
   ============================================================ */

:root {

  /* ── Colors ── */
  --clr-bg:          #0D1A12;
  --clr-bg-card:     #162B1E;
  --clr-bg-input:    #1E3828;
  --clr-gold:        #C9911A;
  --clr-fire:        #E8A020;
  --clr-text:        #F0EBD8;
  --clr-text-muted:  #9A9A8A;
  --clr-heading:     #FFFFFF;
  --clr-border:      #2E4A38;
  --clr-btn-bg:      #C9911A;
  --clr-btn-text:    #0D1A12;
  --clr-btn-hover:   #E8A020;
  --clr-danger:      #CC3333;
  --clr-overlay:     rgba(13, 26, 18, 0.65);

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  3rem;
  --text-hero: clamp(3rem, 8vw, 7rem);

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

  /* ── Layout ── */
  --container-max: 1200px;
  --container-pad: 0 var(--space-6);

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Transitions ── */
  --ease-fast: 150ms ease;
  --ease-base: 300ms ease;
  --ease-slow: 500ms ease;

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-overlay:  10;
  --z-nav:      99;
  --z-bar:      100;
  --z-lightbox: 200;
}