/**
 * assets/css/variables.css
 * Design tokens for 9A Productions theme.
 * All other CSS files import and use these custom properties.
 */

:root {

  /* ── Colors ─────────────────────────────────────────────────────────────── */
  --color-bg-primary:    #0A0A0A;
  --color-bg-secondary:  #111111;
  --color-bg-elevated:   #1A1A1A;
  --color-bg-card:       #141414;

  --color-accent-gold:   #F5A623;
  --color-accent-gold-dim: #C8841A;
  --color-accent-gold-glow: rgba(245, 166, 35, 0.15);

  --color-text-primary:  #FFFFFF;
  --color-text-secondary:#AAAAAA;
  --color-text-muted:    #555555;

  --color-border:        #2A2A2A;
  --color-border-light:  #333333;

  --color-overlay:       rgba(0, 0, 0, 0.6);
  --color-overlay-heavy: rgba(0, 0, 0, 0.85);

  --color-success:       #22C55E;
  --color-error:         #EF4444;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display:        'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --type-display:        clamp(56px, 8vw, 96px);
  --type-h1:             clamp(42px, 6vw, 72px);
  --type-h2:             clamp(28px, 4vw, 48px);
  --type-h3:             clamp(20px, 2.5vw, 28px);
  --type-h4:             clamp(16px, 2vw, 20px);
  --type-body-lg:        18px;
  --type-body:           16px;
  --type-body-sm:        14px;
  --type-label:          12px;
  --type-stat:           clamp(36px, 5vw, 56px);

  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  --leading-tight:       1.1;
  --leading-snug:        1.25;
  --leading-normal:      1.5;
  --leading-relaxed:     1.7;

  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.05em;
  --tracking-wider:      0.1em;
  --tracking-widest:     0.2em;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --section-padding-v:     80px;
  --section-padding-v-sm:  48px;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:       1280px;
  --container-padding:   24px;
  --grid-gap:            24px;
  --grid-gap-lg:         32px;

  /* ── Borders & Radius ───────────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold:  0 0 20px rgba(245, 166, 35, 0.2);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-xslow:  1000ms;

  /* ── Z-index stack ──────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-elevated:10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-nav:     400;
  --z-modal:   500;
  --z-toast:   600;

  /* ── Header ─────────────────────────────────────────────────────────────── */
  --header-height:      80px;
  --header-height-sm:   64px;
}

/* ── Responsive token overrides ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-padding-v:     48px;
    --container-padding:     16px;
    --grid-gap:              16px;
    --header-height:         64px;
  }
}