/* EC Hustles | variables.css — Design Tokens */

:root {
  /* ── Brand Colors ─────────────────────────────── */
  --gold:           #C9A84C;
  --gold-bright:    #E4C76B;
  --gold-dim:       #8F7532;
  --gold-rgb:       201, 168, 76;
  --black:          #0A0A0A;
  --charcoal:       #1A1A1A;
  --charcoal-light: #2A2A2A;
  --charcoal-mid:   #222222;
  --silver:         #C0C0C0;
  --off-white:      #F5F2EB;
  --text-primary:   #F0EDE6;
  --text-muted:     rgba(240, 237, 230, 0.65);
  --success:        #4CAF50;
  --error:          #E74C3C;

  /* ── Typography ───────────────────────────────── */
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type Scale ───────────────────────────────── */
  --fs-display: clamp(3.5rem, 10vw, 8rem);
  --fs-h1:      clamp(2.75rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --fs-h4:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

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

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

  /* ── Shadows ──────────────────────────────────── */
  --shadow-gold:        0 0 24px rgba(201, 168, 76, 0.15);
  --shadow-gold-strong: 0 0 48px rgba(201, 168, 76, 0.3);
  --shadow-lift:        0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-deep:        0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.5);

  /* ── Transitions ──────────────────────────────── */
  --transition:      300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────────────── */
  --max-width:    1280px;
  --max-width-sm: 860px;
  --nav-height:   80px;
  --section-pad:  clamp(var(--sp-7), 10vh, var(--sp-8));

  /* ── Z-Index Scale ────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-top:     9999;
}