/* ============================================================
   THE KING OF POP — Design Tokens
   Aesthetic: cinematic editorial glamour — gallery black,
   gold leaf, sequin silver, dramatic high-contrast Bodoni.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --black: #08080a;
  --bg: #0b0b0e;
  --bg-soft: #121218;
  --panel: #16161d;
  --panel-2: #1d1d27;
  --panel-3: #25252f;

  /* ---- Lines / borders ---- */
  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-gold: rgba(231, 192, 97, 0.32);

  /* ---- Ink ---- */
  --ink: #f7f3ea;
  --ink-2: #c8c3b6;
  --ink-3: #8d877a;
  --ink-faint: #5d5950;

  /* ---- Gold / metal accents ---- */
  --gold: #e7c061;
  --gold-deep: #b8902f;
  --gold-soft: #f4dca0;
  --silver: #dadde2;
  --silver-dim: #9aa0a9;

  /* ---- Category colours (timeline / tags) ---- */
  --c-music: #e7c061;     /* gold      */
  --c-personal: #6fb1d6;  /* sky       */
  --c-legal: #cf5b64;     /* crimson   */
  --c-milestone: #b78cda; /* violet    */
  --c-world: #79c9a6;     /* humanitarian / green */

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #f6e0a6 0%, #e7c061 42%, #b8902f 100%);
  --grad-gold-text: linear-gradient(100deg, #f7e7b8 0%, #e7c061 45%, #cba23f 75%, #f4dca0 100%);
  --grad-silver: linear-gradient(135deg, #ffffff 0%, #d3d6db 45%, #9aa0a9 100%);
  --grad-panel: linear-gradient(160deg, rgba(36, 36, 46, 0.9), rgba(14, 14, 19, 0.92));
  --grad-fade-up: linear-gradient(to top, var(--bg) 4%, rgba(11, 11, 14, 0.55) 45%, transparent 100%);
  --grad-fade-down: linear-gradient(to bottom, var(--bg) 0%, transparent 60%);

  /* ---- Shadows & glows ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.62);
  --glow-gold: 0 0 0 1px var(--line-gold), 0 18px 50px rgba(184, 144, 47, 0.18);
  --glow-gold-strong: 0 0 40px rgba(231, 192, 97, 0.35);

  /* ---- Typography ---- */
  --f-display: "Fraunces", "Hanken Grotesk", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --f-label: "Oswald", "Hanken Grotesk", sans-serif;

  --fs-hero: clamp(3.4rem, 13vw, 11rem);
  --fs-display: clamp(2.6rem, 7vw, 6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.7rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.9rem);
  --fs-lede: clamp(1.05rem, 1.7vw, 1.4rem);
  --fs-body: clamp(1rem, 1.15vw, 1.12rem);
  --fs-small: 0.86rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.72;

  --tracking-label: 0.34em;
  --tracking-wide: 0.16em;

  /* ---- Spacing scale ---- */
  --s-1: 0.4rem;
  --s-2: 0.8rem;
  --s-3: 1.2rem;
  --s-4: 1.8rem;
  --s-5: 2.6rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 9rem;
  --section-y: clamp(4.5rem, 11vw, 9rem);

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --wrap-wide: 1480px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.2s;
  --t-med: 0.45s;
  --t-slow: 0.8s;

  /* ---- Z-index ---- */
  --z-grain: 9000;
  --z-nav: 1000;
  --z-overlay: 1500;
}