/* ============================================================
   DESIGN TOKENS — Parrish Entertainment
   Complete token system: color, type, spacing, motion, layout
   ============================================================ */

:root {
  /* --- COLOR: Backgrounds --- */
  --bg-primary:     #080808;
  --bg-surface:     #111111;
  --bg-card:        #161616;
  --bg-elevated:    #1A1A1A;

  /* --- COLOR: Accents --- */
  --accent-gold:    #C9A84C;
  --accent-gold-light: #D4B85E;
  --accent-warm:    #F0EDE6;

  /* --- COLOR: Text --- */
  --text-primary:   #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted:     #888888;
  --text-subtle:    #555555;

  /* --- COLOR: Borders & Dividers --- */
  --border:         #1E1E1E;
  --border-light:   #2A2A2A;

  /* --- COLOR: Overlays --- */
  --overlay-heavy:  rgba(8, 8, 8, 0.92);
  --overlay-medium: rgba(8, 8, 8, 0.75);
  --overlay-light:  rgba(8, 8, 8, 0.5);

  /* --- TYPOGRAPHY: Families --- */
  --font-heading:   'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;

  /* --- TYPOGRAPHY: Scale (modular, clamp-based) --- */
  --text-xs:    0.75rem;     /* 12px — badges, labels */
  --text-sm:    0.8125rem;   /* 13px — captions, meta */
  --text-base:  0.9375rem;   /* 15px — body default */
  --text-md:    1.0625rem;   /* 17px — lead paragraphs */
  --text-lg:    1.25rem;     /* 20px — subheads, nav logo */

  --heading-sm: clamp(1.25rem, 1.8vw, 1.5rem);     /* h4 equivalent */
  --heading-md: clamp(1.5rem, 2.5vw, 2rem);         /* h3 equivalent */
  --heading-lg: clamp(2rem, 3.5vw, 3rem);            /* h2 — section titles */
  --heading-xl: clamp(2.5rem, 5vw, 4.25rem);         /* h1 — hero */
  --heading-display: clamp(3rem, 6vw, 5.5rem);       /* display — homepage hero */

  /* --- TYPOGRAPHY: Weight --- */
  --weight-light:   300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* --- TYPOGRAPHY: Line Height --- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* --- TYPOGRAPHY: Letter Spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* --- SPACING: 4px grid --- */
  --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;

  /* --- SPACING: Section rhythm --- */
  --section-pad:       clamp(80px, 10vw, 140px);
  --section-pad-sm:    clamp(56px, 7vw, 96px);

  /* --- LAYOUT --- */
  --container-max:     1280px;
  --container-narrow:  840px;
  --container-pad:     clamp(20px, 4vw, 64px);
  --radius:            4px;
  --radius-md:         8px;
  --radius-lg:         12px;

  /* --- MOTION: Easing curves --- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- MOTION: Duration --- */
  --duration-fast:   0.2s;
  --duration-base:   0.4s;
  --duration-slow:   0.7s;
  --duration-slower:  1s;

  /* --- MOTION: Transitions (precomposed) --- */
  --transition:       0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:  0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:  0.7s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- SHADOWS --- */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(201, 168, 76, 0.15);
}