/* ─────────────────────────────────────────
   RRP Design Tokens — Stap 1
   Brandboek (Pantone) + PDF typografie
   ───────────────────────────────────────── */

:root {
  /* ══════════════════════════════════════════
     LAYOUT FOUNDATION — artboard + canvas
     Referentie: PDF 1170pt breed. Visuele waarden = baseline.
     ══════════════════════════════════════════ */
  --artboard-ref-width: 73.125rem; /* 1170px */

  /* Canvas band (homepage hero + illustrated pages, desktop) */
  --canvas-inset-top: 10rem;
  --canvas-illustration-height-min: 54rem;
  --canvas-scroll-min-height: 66rem;
  --canvas-hero-headline: 7.5rem;
  --canvas-illustration-inset-top: clamp(5.5rem, 14svh, 10rem);
  --canvas-pick-size: clamp(17.5rem, 31vw, 26rem);
  --canvas-pick-size-stack: clamp(15rem, 52vw, 17rem);
  --canvas-pick-inset-x: clamp(3rem, 8vw, 6rem);
  --canvas-pick-inset-x-stack: clamp(2rem, 6vw, 4rem);
  /* Homepage hero portrait: pick-top net onder regel 2 ("You Will") */
  --pick-cta-gap-below-will: var(--space-xs);
  /* Illustratie: desktop = contain+scale (breed scherm); stack = cover (portrait) */
  --canvas-illustration-fit: contain;
  --canvas-illustration-scale: 1.1;
  --canvas-illustration-photo-position: center center;

  /* Aliassen — zelfde waarden als vóór refactor (visuele pariteit) */
  --rrp-illustration-inset-top: var(--canvas-illustration-inset-top);
  --hero-inset-top-fixed: var(--canvas-inset-top);
  --hero-illustration-height-min: var(--canvas-illustration-height-min);
  --hero-scroll-min-height: var(--canvas-scroll-min-height);
  --text-display-hero-fixed: var(--canvas-hero-headline);
  --pick-cta-size: var(--canvas-pick-size);
  --pick-cta-size-stack: var(--canvas-pick-size-stack);
  --pick-cta-inset-x: var(--canvas-pick-inset-x);
  --pick-cta-inset-x-stack: var(--canvas-pick-inset-x-stack);

  /* ── Kleuren (Pantone brandboek) ── */
  --color-pantone-296: #000818;   /* donkerblauw — achtergrond */
  --color-pantone-248: #9C1A81;   /* roze-paars — accent (Lottie-logo) */
  /* Legacy magenta (Pantone 248, t/m jul 2026) — terugdraaien:
     --color-pantone-248: #872B7D;
     --magenta-light: #9e3493;
     Hardcoded SVG/logo: #872B7D · pick-PNG’s: #95178F */

  --bg: var(--color-pantone-296);
  --magenta: var(--color-pantone-248);
  --magenta-light: color-mix(in srgb, var(--magenta) 72%, white 28%);
  --text-on-magenta: var(--color-pantone-296);

  /* ── Oswald gewichten ──
     300 Light  — body secundair, agenda-details
     400 Regular — body, countdown
     600 SemiBold — navigatie, labels
     700 Bold — koppen, menu-items, hero "SOON YOU WILL"
  */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --font-family: 'Oswald', sans-serif;

  /* ── Display-koppen (PDF: desktop 80pt, mobile 56pt — altijd gelijk onder elkaar) ──
     Hero + sectiekoppen delen dezelfde schaal; schaalt op viewport-hoogte.
     Desktop artboard: 80pt @ 1170pt = 6.8% breedte · Mobile: 56pt @ 340pt = 16.5%
  */
  --text-display: clamp(2.75rem, 11svh, 8rem);
  --text-hero: var(--text-display);
  --text-section-title: var(--text-display);
  --text-page-title: var(--text-display);
  --text-menu-item: clamp(2rem, 4.5vw, 3.75rem);
  --text-menu-support: clamp(1.5rem, 2.8vw, 2rem);   /* zoek, social, footer in menu */
  --menu-social-line-gap: 0.3rem;
  --menu-logo-size: clamp(16rem, 38.4vw, 22.4rem);
  --menu-logo-inset-top: var(--space-sm);
  --menu-logo-gap: clamp(1rem, 3vw, 2rem);
  --menu-top-block: calc(var(--nav-pick-height) + var(--space-lg));
  --text-nav: 1.75rem; /* PDF 18pt — vast op desktop navbalk (T1/T2) */
  --text-intro-lg: clamp(1.25rem, 1.8vw, 1.833rem); /* 22pt — subkoppen */
  --text-body: var(--text-intro-lg);                 /* body = subkop-grootte */
  --text-body-sm: 1.167rem;                          /* 14pt */
  --text-caption: 1.167rem;                          /* 14pt footer/klein */
  --text-footer: 1.167rem;                           /* 14pt */
  --text-agenda-venue: clamp(1.85rem, 5vw, 3.6rem);   /* 48pt PDF, vergroot */
  --text-agenda-details: clamp(1rem, 1.8vw, 1.833rem); /* altijd kleiner dan venue */

  --leading-tight: 0.9;
  --leading-display: 1.0;    /* kopteksten — lichte regelafstand */
  --leading-normal: 1.8;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.2em;

  /* Leesbaarheid tekst over illustratie — donkerblauw halo + diepte (PDF) */
  --text-shadow-halo:
    0 0 2px rgba(0, 8, 24, 0.88),
    0 0 6px rgba(0, 8, 24, 0.58),
    0 0 12px rgba(0, 8, 24, 0.32);
  --text-shadow-depth:
    5px 9px 18px rgba(0, 8, 24, 0.38),
    9px 16px 36px rgba(0, 8, 24, 0.24),
    13px 24px 52px rgba(0, 8, 24, 0.12);
  --text-shadow-display: var(--text-shadow-halo), var(--text-shadow-depth);

  --text-shadow-hero-halo:
    0 0 2px rgba(0, 8, 24, 0.95),
    0 0 8px rgba(0, 8, 24, 0.68),
    0 0 16px rgba(0, 8, 24, 0.42);
  --text-shadow-hero-depth:
    6px 10px 22px rgba(0, 8, 24, 0.45),
    10px 18px 44px rgba(0, 8, 24, 0.28),
    14px 28px 60px rgba(0, 8, 24, 0.14);
  --text-shadow-hero: var(--text-shadow-hero-halo), var(--text-shadow-hero-depth);

  --drop-shadow-display:
    drop-shadow(0 0 2px rgba(0, 8, 24, 0.58))
    drop-shadow(5px 9px 18px rgba(0, 8, 24, 0.38))
    drop-shadow(13px 24px 52px rgba(0, 8, 24, 0.12));

  /* SVG/nav — zelfde halo+diepte als --text-shadow-hero */
  --drop-shadow-hero:
    drop-shadow(0 0 2px rgba(0, 8, 24, 0.95))
    drop-shadow(0 0 8px rgba(0, 8, 24, 0.68))
    drop-shadow(0 0 16px rgba(0, 8, 24, 0.42))
    drop-shadow(6px 10px 22px rgba(0, 8, 24, 0.45))
    drop-shadow(10px 18px 44px rgba(0, 8, 24, 0.28))
    drop-shadow(14px 28px 60px rgba(0, 8, 24, 0.14));

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 5rem;

  --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-padding-y: clamp(2rem, 5vw, 3.5rem);
  --section-padding-y-tight: clamp(1.25rem, 3vw, 2rem);
  --content-max: 75rem;        /* smalle pagina's (forms etc.) */

  /* ── Layout — pagina-breedte + tekstblokken ──
     Pagina: vult scherm (100%), stopt bij plafond (ultrawide).
     Tekstblok-tokens: PDF-verhoudingen voor kolommen/intro waar nodig.
  */
  --layout-artboard-ceiling: 120rem; /* 1920px plafond */
  --layout-artboard-max: var(--layout-artboard-ceiling);
  --text-block-centered: 74.75rem;  /* 897pt intro (referentie) */
  --text-block-column: 45.33rem;     /* krant-kolom */
  --text-block-hero: 70%;            /* schaalt mee met pagina-breedte */
  --text-block-narrow: 34.67rem;
  --text-indent-column: 6rem;

  /* Twee-kolom secties (Rock History, Crew) */
  --section-split-text: 58%;
  --section-split-media: 42%;
  --section-media-scale: 66.667%;

  /* Stippellijn — secties (divider) */
  --rule-dot-size: 4px;
  --rule-dot-gap: 18px;
  --rule-dot-height: 10px;

  /* Stippellijn — agenda-items (dunner) */
  --rule-dot-size-agenda: 1.5px;
  --rule-dot-gap-agenda: 14px;
  --rule-dot-height-agenda: 6px;

  /* Aliassen (backwards compat) */
  --content-max-home: var(--layout-artboard-max);
  --content-max-intro: var(--text-block-centered);

  /* ── Layout (mobile-first, geen vaste px voor schaal) ── */
  /* Logo ladder — vaste rem per tier (§3); T2/T3 zelfde SVG-schaal, T3 alleen crop */
  --logo-size-t1: 22.5625rem;
  --logo-size-t2-t3: 20.25rem;
  --logo-size-t4: 15.79rem;
  --logo-size: var(--logo-size-t1);
  --logo-size-stack: var(--logo-size-t2-t3);
  --nav-pick-height: clamp(2.2rem, 4.4vw, 3.125rem);
  --nav-padding-top: clamp(var(--space-sm), 2.5vw, var(--space-xl));
  --nav-padding-bottom: clamp(var(--space-sm), 1.5vw, var(--space-md));
  --nav-bar-height: calc(var(--nav-padding-top) + var(--nav-pick-height) + var(--nav-padding-bottom));
  --nav-hide-links: 1100px;
  --logo-plectrum-hide: 1200px;
  /* Ricky's + Rock Party in viewBox (y≈149–244 @ 283) */
  --logo-crop-shift: 52.5%;
  --logo-crop-height-ratio: 0.34;
  --logo-crop-height: calc(var(--logo-size-stack) * var(--logo-crop-height-ratio));

  /* Lottie logo — zelfde tier-ladder als SVG (T1 baseline 16.1rem) */
  --logo-lottie-size-t1: 16.1rem;
  --logo-lottie-to-svg-ratio: calc(var(--logo-lottie-size-t1) / var(--logo-size-t1));
  --logo-lottie-size: calc(var(--logo-size) * var(--logo-lottie-to-svg-ratio));
  --logo-lottie-scale: 2.85;
  --logo-lottie-y-ratio: 0.54;
  --logo-lottie-clip-size: min(72vw, var(--logo-lottie-size));
  --logo-lottie-frame-size: calc(var(--logo-lottie-clip-size) * var(--logo-lottie-scale));
  --logo-lottie-frame-ref: calc(var(--logo-lottie-size-t1) * var(--logo-lottie-scale));
  --logo-lottie-crop-unit: calc(var(--logo-lottie-frame-size) / var(--logo-lottie-frame-ref));
  --logo-lottie-crop-top-base: 160;
  --logo-lottie-crop-bottom-base: 290;
  --logo-lottie-crop-sides-base: 180;
  --logo-lottie-crop-top: calc(var(--logo-lottie-crop-top-base) * 1px * var(--logo-lottie-crop-unit));
  --logo-lottie-crop-bottom: calc(var(--logo-lottie-crop-bottom-base) * 1px * var(--logo-lottie-crop-unit));
  --logo-lottie-crop-sides: calc(var(--logo-lottie-crop-sides-base) * 1px * var(--logo-lottie-crop-unit));
  --logo-lottie-crop-width: calc(var(--logo-lottie-frame-size) - 2 * var(--logo-lottie-crop-sides));
  --logo-lottie-crop-height: calc(var(--logo-lottie-frame-size) - var(--logo-lottie-crop-top) - var(--logo-lottie-crop-bottom));
  --logo-lottie-anchor-height: var(--logo-lottie-clip-size);
  /* Crop-box top t.o.v. anchor (clip-size basis) */
  --logo-lottie-crop-offset-y: calc(var(--logo-lottie-clip-size) * var(--logo-lottie-y-ratio) - var(--logo-lottie-frame-size) / 2 + var(--logo-lottie-crop-top));

  /* Mobile pick — zie @media (max-width: 768px) */

  /* ── Breakpoints (referentie) ──
     sm: 480px · md: 768px · lg: 1024px · xl: 1280px
  */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Desktop: vaste display-koppen (zelfde als homepage hero) */
@media (min-width: 1201px) {
  :root {
    --text-display: var(--canvas-hero-headline);
  }
}

/* Compact desktop — alleen korte viewports (1080p-laptop + browser-chrome) */
@media (min-width: 1201px) and (max-height: 1100px) {
  :root {
    --canvas-inset-top: clamp(5rem, 9svh, 7rem);
    /* Display: proportioneel t.o.v. T1 7.5rem @ 1200px hoogte — T2-1080p: 7rem */
    --canvas-hero-headline: 7rem;
    --text-intro-lg: 1.7rem;
    --text-body: 1.7rem;
    /* Pick: proportioneel t.o.v. T1 26rem @ 1200px hoogte — T2-1080p: 23.5rem */
    --canvas-pick-size: 23.5rem;
    /* Logo: zelfde schaal als T3 stack — alleen crop verschilt op tablet */
    --logo-size: var(--logo-size-t2-t3);
    --canvas-illustration-scale: 1;
    --canvas-illustration-height-min: 48rem;
  }
}

/* Compact desktop, lage hoogte — T2-laag 1440×900 */
@media (min-width: 1201px) and (max-height: 950px) {
  :root {
    --canvas-hero-headline: 6rem;
    --text-intro-lg: 1.5rem;
    --text-body: 1.5rem;
    --canvas-pick-size: 19.5rem;
  }
}

/* Tablet + mobile: hamburger-nav */
@media (max-width: 1200px) {
  :root {
    --nav-pick-height: 3.125rem;
    --canvas-illustration-fit: cover;
    --canvas-illustration-scale: 1;
    /* Lottie T3/T4 stack — zelfde schaal als SVG stack + plectrum weg */
    --logo-lottie-size: calc(var(--logo-size-stack) * var(--logo-lottie-to-svg-ratio));
    --logo-lottie-stack-top-relief: calc(13 * 1px * var(--logo-lottie-crop-unit));
    --logo-lottie-anchor-height: calc(var(--logo-crop-height) + var(--logo-lottie-stack-top-relief));
    --logo-lottie-crop-top: calc(var(--logo-lottie-frame-size) - var(--logo-lottie-crop-bottom) - var(--logo-crop-height) - var(--logo-lottie-stack-top-relief));
    --logo-lottie-crop-height: calc(var(--logo-crop-height) + var(--logo-lottie-stack-top-relief));
    --logo-lottie-crop-offset-y: 0;
  }
}

/* Tablet: vaste display-kop — geen svh (scroll-groei fix). T3-grens 1200×800: ex 11svh ≈ 5.5rem */
@media (min-width: 769px) and (max-width: 1200px) {
  :root {
    --text-display: 5.5rem;
    --text-intro-lg: 1.45rem;
    --text-body: 1.45rem;
    /* Pick stack: proportioneel t.o.v. T1 26rem — T3-grens 1200×800 ≈ 17rem */
    --canvas-pick-size-stack: 17rem;
    /* Logo stack: zelfde SVG als T2 compact; alleen crop + ringen verborgen */
    --logo-size-stack: var(--logo-size-t2-t3);
  }
}

/* Mobile: PDF schaalt koppen + body proportioneel (70% t.o.v. desktop) */
@media (max-width: 768px) {
  :root {
    --logo-size-stack: var(--logo-size-t4);
    --text-display: clamp(2rem, 8svh, 5.85rem);
    --text-intro-lg: 1.6rem;
    --text-body: 1.5rem;
    --text-body-sm: 0.9375rem;   /* 14pt × 0.8 */
    --text-caption: 0.9375rem;
    --text-footer: 0.9375rem;
    --text-block-centered: 24.583rem; /* 295pt @ 340pt artboard (scherm) */
    --text-block-hero: 100%;
    --text-indent-column: 0;
    --text-agenda-venue: clamp(1.5rem, 5.5vw, 2.5rem);
    --text-agenda-details: clamp(0.9rem, 2.5vw, 1.125rem);

    /* Hero pick — PDF mobile ~29% artboard-breedte (340/1170) */
    --canvas-pick-size-mobile: clamp(9rem, 40vw, 12rem);
    --canvas-pick-inset-x-mobile: clamp(1rem, 4vw, 1.75rem);
    --pick-cta-size-mobile: var(--canvas-pick-size-mobile);
    --pick-cta-inset-x-mobile: var(--canvas-pick-inset-x-mobile);
  }
}