/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Portfolio Site V2 (Enhanced)
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --bg:             #050505;
  --bg-gradient:    radial-gradient(circle at 50% -20%, #151515, #050505 80%);
  --surface:        rgba(17, 17, 17, 0.4);
  --surface-hover:  rgba(25, 25, 25, 0.8);
  --glass-border:   rgba(255, 255, 255, 0.03);
  --border:         #1A1A1A;
  --text-primary:   #F0EDE8;
  --text-muted:     #666666;
  --accent-gold:    #D4AF37; /* Brighter gold */
  --accent-gold-glow: rgba(212, 175, 55, 0.15);
  --accent-jade:    #4A7C6F;
  --accent-crimson: #8B0000;

  /* ── Typography — Families ── */
  --font-display:   'Cormorant Garamond', serif;
  --font-subhead:   'Syne', sans-serif;
  --font-body:      'DM Mono', monospace;

  /* ── Typography — Sizes ── */
  --text-hero:      clamp(80px, 15vw, 180px);
  --text-h1:        clamp(48px, 6vw, 72px);
  --text-h2:        clamp(40px, 5vw, 56px);
  --text-h3:        clamp(24px, 3vw, 32px);
  --text-contact:   clamp(48px, 6vw, 80px);
  --text-subhead:   14px;
  --text-body:      15px;
  --text-label:     11px;
  --text-chip:      10px;
  --text-footer:    11px;

  /* ── Typography — Tracking ── */
  --tracking-display: -0.04em;
  --tracking-hero:    -0.03em;
  --tracking-subhead:  0.2em;
  --tracking-label:    0.35em;

  /* ── Spacing ── */
  --section-pad:     clamp(120px, 15vw, 200px);
  --content-max:     1100px;
  --grid-gap:        24px;

  /* ── Motion ── */
  --ease-reveal:     cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-reveal:  1000ms;
  --duration-hover:   300ms;
  --duration-load:    1200ms;
}