/* ═══ Level 7 Pictures · design tokens ═══
   Brand colours only: #030C16 #0B131D #005588 #2890D8 #9FCBEE (+ white, + Netflix red for Netflix marks only).
   Every component in site.css is built from these. Contrast notes are measured on --bg-dark. */

/* Metric-matched fallbacks: until a web font arrives, text renders in a local font scaled to the web font's width
   and line metrics, so the swap does not reflow the page. Measured against the real fonts at 100px. */
@font-face { font-family: "Anton Fallback"; src: local("Impact"), local("Impact Regular"); font-weight: 400;
  size-adjust: 97.5%; ascent-override: 121%; descent-override: 33.8%; line-gap-override: 0%; }
@font-face { font-family: "Lalezar Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 400;
  size-adjust: 106.2%; ascent-override: 92.3%; descent-override: 55.6%; line-gap-override: 0%; }

:root {
  /* colour */
  --bg-dark: #030c16;
  --bg-dark-2: #0b131d;          /* surfaces, alternate panels (V8 #071A2B maps here) */
  --brand: #005588;              /* fills behind white text (contact block, blue buttons) */
  --interactive: #2890d8;        /* accents, active dots, hover of --brand (V8 #00476F maps here) */
  --tint: #9fcbee;               /* kickers, text links, outline pills: 11.2:1 */
  --text: #ffffff;
  --text-soft: rgba(255,255,255,.82);   /* secondary copy, nav and footer links, lead */
  --text-muted: rgba(255,255,255,.70);  /* muted copy */
  --text-subtle: rgba(255,255,255,.55); /* fine print on flat dark only, never over media */
  --text-on-light: #030c16;
  --netflix: #e50914;            /* Netflix marks and the Obsess dot only */
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.10);
  --surface-4: rgba(255,255,255,.35);
  --glass: rgba(3,12,22,.82);    /* floating nav */
  --glass-soft: rgba(3,12,22,.55);
  --bg-hover: #0e1824;           /* card hover surface (V8.1 §7) */
  --window-tint: #4a5d72;         /* Home hero: multiplied over the footage; the ٧ (white) stays full-bright */

  /* type */
  --font-display: "Anton", "Anton Fallback", Impact, sans-serif;      /* Latin display, one weight (400) */
  --font-body: "Hanken Grotesk", system-ui, Arial, sans-serif;
  --font-ar: "Lalezar", "Lalezar Fallback", Tahoma, sans-serif;       /* Arabic, one weight (400) */
  --font-mark: "Alexandria", Tahoma, sans-serif;                     /* the ٧ brand mark only, weight 900 */
  --ls-display: .005em;
  --lh-ar-display: 1.35;             /* Arabic display text: room for Lalezar's tall ascenders and dots */
  --fs-xs: 12px;                 /* floor: nothing smaller ships */
  --fs-label: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lead: clamp(16px, 1.4vw, 19px);
  --fs-h3: clamp(26px, 2.8vw, 40px);     /* display 40: h3, stats, service titles */
  --fs-card-l: clamp(22px, 1.95vw, 28px); /* large card titles: news, now-cards, Home panels, office city */
  --fs-card-m: 22px;                      /* medium card titles */
  --fs-card-s: 18px;                      /* small card titles: directed, Productions, Careers, routes */
  --fs-h2: clamp(30px, 4.2vw, 60px);     /* display 60 */
  --fs-h1: clamp(42px, 6.6vw, 95px);     /* display 95 */
  --ls-caps: .14em;              /* every label: section kicker 13px, card label 12px (the pill keeps .1em) */

  /* shape + space */
  --r-pill: 999px;
  --r-sm: 8px;                   /* badges, countdown cells */
  --r-md: 14px;                  /* thumbnails, inputs */
  --r-lg: 22px;                  /* = --r-card */
  --r-card: 22px;                /* cards, media, stills, trailer */
  --r-xl: 32px;                  /* = --r-2xl */
  --r-2xl: 32px;                 /* big panels: contact block, Said portrait */
  --gutter: clamp(18px, 4.5vw, 64px);
  --wrap: 1440px;
  --section-gap: clamp(72px, 8vw, 112px);
  --tap: 44px;                   /* minimum target size */

  --ease: cubic-bezier(.2,.7,.2,1);
}