:root {
  /* ── Colors ──────────────────────────────────────────────────────── */
  --clr-cream:        #f1efeb;   /* About + Merch bg; light text on dark */
  --clr-dark:         #0e0e0e;   /* Shows / Fan Zone / Get in Touch / footer bg; dark text */
  --clr-white:        #ffffff;   /* Pill buttons on dark; inactive carousel dots */
  --clr-gold:         #f7bd49;   /* Active carousel dot; squiggle accent */
  --clr-muted:        #61615f;   /* "Stay connected", "Say hello" labels */
  --clr-footer-text:  #c5c5c5;   /* Footer copyright + links */
  --clr-ghost:        rgba(241, 239, 235, 0.30);  /* Watermark section headings */
  --clr-arrow-bg:     rgba(255, 255, 255, 0.40);  /* Carousel arrow button bg */
  --clr-hero-fade:    rgba(14,  14,  14,  0.70);  /* Hero top/bottom gradient end stop */

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;  /* Nav, section headings */
  --font-body:    'Poppins', sans-serif;     /* All body copy, buttons, labels */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* Type scale */
  --fs-watermark:        200px;  /* Behind-text watermark ("About Damon") */
  --fs-hero-name:        128px;  /* Hero name "Damon Wayans Jr" */
  --fs-section-heading:   96px;  /* Section headings */
  --fs-slide-title:       48px;  /* Carousel slide title */
  --fs-body-lg:           32px;  /* Section body / description paragraphs */
  --fs-nav:               28px;  /* Nav items (Bebas Neue) */
  --fs-subhead:           24px;  /* "Filmography", "Stay connected", "Say hello" */
  --fs-body:              20px;  /* Show rows, filmography items */
  --fs-ui:                15px;  /* "Find tickets" button */
  --fs-caption:           12px;  /* Footer copyright + policy links */

  /* Line heights */
  --lh-display: 0.96;  /* Display / large headings */
  --lh-body:    1.4;   /* All body text and UI */
  --lh-nav:     1;     /* Nav items */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --canvas-width:  1440px;
  --gutter:          92px;   /* Horizontal page padding */
  --content-width: 1256px;   /* 1440 - (92 × 2) */

  /* ── Components ─────────────────────────────────────────────────── */

  /* Pill button */
  --btn-padding: 14px 20px;
  --btn-radius:  40px;

  /* Carousel dots */
  --dot-width:  48px;
  --dot-height:  4px;
  --dot-gap:     8px;
  --dot-radius: 40px;

  /* Social icon row */
  --social-size:    48px;   /* Body sections */
  --social-size-lg: 56px;   /* Hero slide */
  --social-gap:     24px;
}