/* ══════════════════════════════════════════════════════════════
   VARIABLES · CSS Custom Properties (Design Tokens)
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --color-bg-primary:     #0A0B0D;
  --color-bg-secondary:   #111318;
  --color-bg-card:        #161820;
  --color-bg-overlay:     rgba(10, 11, 13, 0.75);
  --color-bg-nav:         rgba(10, 11, 13, 0.95);

  /* ── FOREGROUND / TEXT ───────────────────────────────────── */
  --color-text-primary:   #F0EDE8;
  --color-text-secondary: rgba(240, 237, 232, 0.60);
  --color-text-muted:     rgba(240, 237, 232, 0.35);

  /* ── ACCENT (Gold / Amber) ───────────────────────────────── */
  --color-accent:         #C9A84C;
  --color-accent-light:   #E8C97A;
  --color-accent-dim:     rgba(201, 168, 76, 0.12);
  --color-accent-border:  rgba(201, 168, 76, 0.30);

  /* ── BORDERS & DIVIDERS ──────────────────────────────────── */
  --color-border:         rgba(240, 237, 232, 0.08);
  --color-divider:        rgba(240, 237, 232, 0.06);

  /* ── SURFACE STATES ──────────────────────────────────────── */
  --color-surface-hover:  rgba(255, 255, 255, 0.04);

  /* ── TYPOGRAPHY FAMILIES ─────────────────────────────────── */
  --font-display:   'Bebas Neue', 'Impact', sans-serif;
  --font-heading:   'Montserrat', 'Segoe UI', sans-serif;
  --font-body:      'Inter', 'Segoe UI', sans-serif;

  /* ── TYPOGRAPHY SCALE (fluid with clamp) ─────────────────── */
  --text-hero:      clamp(72px, 11vw, 156px);
  --text-display:   clamp(40px, 6vw, 88px);
  --text-h2:        clamp(28px, 3.5vw, 52px);
  --text-h3:        clamp(18px, 2vw, 26px);
  --text-h4:        clamp(14px, 1.5vw, 17px);
  --text-body-lg:   clamp(16px, 1.4vw, 19px);
  --text-body:      clamp(14px, 1.2vw, 16px);
  --text-caption:   12px;
  --text-label:     11px;

  /* ── LETTER SPACING ──────────────────────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.20em;

  /* ── LINE HEIGHT ─────────────────────────────────────────── */
  --leading-tight:   1.0;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── SPACING SCALE (base 4px) ────────────────────────────── */
  --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;

  /* ── CONTAINERS ──────────────────────────────────────────── */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:   760px;
  --container-px:      clamp(20px, 5vw, 80px);

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-card:  0 4px 32px rgba(0, 0, 0, 0.40);
  --shadow-glow:  0 0 48px rgba(201, 168, 76, 0.12);
  --shadow-nav:   0 1px 0 rgba(240, 237, 232, 0.06);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-INDEX STACK ───────────────────────────────────────── */
  --z-base:      1;
  --z-card:     10;
  --z-overlay:  20;
  --z-nav:      50;
  --z-modal:   100;

  /* ── NAV HEIGHT ──────────────────────────────────────────── */
  --nav-height: 72px;
}