/* Local font-face declarations — Avenir (licensed) + Google Fonts fallback already removed */
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-book-oblique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-black.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url('../fonts/avenir-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   LAB111 Design System — Core Tokens
   Colors + Type, with semantic aliases.
   Source: LAB111 Brand Re-Brand V5 (2025) + Celebrating Cinema design kit.
   ========================================================================= */

/* --- Font imports ----------------------------------------------------------
   Brand fonts are Termina Heavy (display) and Avenir Black (UI/body).
   Neither has a free equivalent on Google Fonts; the substitutions below
   are the closest free matches. Replace with the real licensed fonts when
   available (drop the .woff2 files into /fonts/ and update the @font-face).
   --------------------------------------------------------------------------- */
:root {
  /* ---------- BRAND PALETTE (from official guidelines) -------------------- */
  --lab-blue:        #3201FF; /* PRIMARY. Pantone-style electric blue.      */
  --lab-blue-deep:   #190064; /* Deep blue — headers/footers, dark accents. */
  --lab-blue-light:  #A1B7E0; /* Light blue — soft accent / backgrounds.    */
  --lab-pink:        #FFC8DC; /* Primary pink — soft, paired with black.    */
  --lab-pink-hot:    #EF84B3; /* Hot pink — energy, callouts.               */
  --lab-purple:      #A50091; /* Magenta-purple secondary.                  */
  --lab-purple-wine: #7D0064; /* Deep wine — rich mood, moody film frames.  */
  --lab-black:       #000000; /* 100% zwart (black).                        */
  --lab-white:       #FFFFFF; /* 100% wit (white).                          */

  /* ---------- EXTENDED NEUTRALS (derived, for UI needs) ------------------ */
  --lab-ink:         #0A0A0A; /* near-black for long-form body text         */
  --lab-ink-2:       #2A2A2A; /* secondary text on light                    */
  --lab-ink-3:       #6B6B6B; /* muted meta / captions on light             */
  --lab-line:        #E5E5E5; /* hairline dividers on light                 */
  --lab-surface:     #FAFAFA; /* off-white surface                          */
  --lab-film:        #0D0B1A; /* near-black with blue undertone             */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND --------------------------- */
  --fg-1: var(--lab-black);   /* primary text on light surfaces             */
  --fg-2: var(--lab-ink-2);   /* secondary text                             */
  --fg-3: var(--lab-ink-3);   /* meta / tertiary                            */
  --fg-on-blue:  var(--lab-white);
  --fg-on-pink:  var(--lab-black);
  --fg-on-black: var(--lab-white);

  --bg-1: var(--lab-white);   /* default page surface                       */
  --bg-2: var(--lab-surface);
  --bg-invert: var(--lab-black);
  --bg-brand:  var(--lab-blue);
  --bg-accent: var(--lab-pink);

  --border-1: var(--lab-line);
  --border-strong: var(--lab-black);

  /* ---------- SEMANTIC SYSTEM (borrowed from cinema UX, not brand-spec) -- */
  --status-ok:    #2E7D32;
  --status-warn:  #ED6C02;
  --status-error: #C62828;

  /* ---------- TYPOGRAPHY -------------------------------------------------- */
  /* Brand fonts (real) — fall back to closest Google Fonts                  */
  --font-display: "Termina", "Saira Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Avenir", "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* Type scale — display is ALWAYS UPPERCASE per brand (LAB111 typesetting) */
  --fs-hero:       clamp(56px, 9vw, 136px);   /* stacked posters, splash    */
  --fs-display-1:  clamp(40px, 6vw, 88px);    /* page titles                */
  --fs-display-2:  clamp(32px, 4.5vw, 64px);  /* section headers            */
  --fs-h1:         40px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-meta:       12px;
  --fs-kicker:     11px;  /* “NEW EPISODE:” / “NOW PLAYING” labels          */

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* display caps                              */
  --tracking-kicker: 0.22em;   /* “Avenir Black (wide spaced)” per brand    */

  /* ---------- SPACING, RADII, SHADOWS, MOTION ---------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radii — LAB111 is predominantly SHARP. Radii only for small UI chrome. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Shadows — sparingly used; brand is flat/graphic, not glossy.           */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(50,1,255,0.18);    /* blue-tinted         */
  --shadow-ring:  0 0 0 2px var(--lab-blue);

  /* Motion — crisp, short. No bouncy easing. */
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  /* Layout */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1440px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY STYLES
   ========================================================================= */

.lab-hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

.lab-display-1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display-1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.lab-display-2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display-2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.lab-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.lab-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.lab-h3 {
  font-family: var(--font-body);
  font-weight: var(--w-black);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.lab-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.lab-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.lab-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.lab-meta {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Kicker labels — “NEW EPISODE:”, “NOW PLAYING”, "LAB CLASSICS"
   Avenir Black, all caps, wide tracking — per brand style sheet.          */
.lab-kicker {
  font-family: var(--font-body);
  font-weight: var(--w-black);
  font-size: var(--fs-kicker);
  line-height: 1;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

/* Outline display text — signature treatment from Celebrating Cinema kit.
   Use sparingly and large (>=48px) for legibility.                         */
.lab-outline {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent;
  letter-spacing: var(--tracking-normal);
}

/* Plain tags applied site-wide */
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 { font: var(--w-black) var(--fs-h1)/var(--lh-snug) var(--font-display); text-transform: uppercase; }
h2 { font: var(--w-bold)  var(--fs-h2)/var(--lh-snug) var(--font-display); text-transform: uppercase; }
h3 { font: var(--w-black) var(--fs-h3)/var(--lh-snug) var(--font-body); }
h4 { font: var(--w-bold)  var(--fs-h4)/var(--lh-snug) var(--font-body); }
p  { font: var(--w-regular) var(--fs-body)/var(--lh-normal) var(--font-body); }
a  { color: var(--lab-blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--lab-blue-deep); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); padding: 1px 4px; border-radius: 2px; }