/* ==========================================================================
   CineNow — Design Tokens (Institutional "Navy / Steel Blue" theme)
   Warm off-white background, near-black text, deep-navy primary, steel-blue accent.
   (Accent token names kept as --color-yellow* so every reference recolours at once.)
   ========================================================================== */

:root {
  /* ---- Palette primitives ---- */
  --color-bg: #F8F5EF;          /* warm off-white page */
  --color-bg-2: #ECE7DC;        /* deeper beige band */
  --color-surface: #ffffff;     /* cards */
  --color-ink: #111827;         /* near-black text */
  --color-ink-soft: #475569;    /* slate secondary text */
  --color-ink-mut: #94A3B8;     /* slate tertiary text */
  --color-yellow: #3B82F6;      /* steel-blue accent */
  --color-yellow-soft: #DBEAFE; /* light blue wash */
  --color-yellow-deep: #2563EB; /* deep blue accent */
  --color-dark: #0F172A;        /* deep navy buttons / primary */
  --color-navy: #0F172A;        /* deep navy */
  --color-charcoal: #1E293B;    /* charcoal secondary */

  /* ---- Semantic roles ---- */
  --bg-base: var(--color-bg);
  --bg-elevated: var(--color-surface);
  --bg-elevated-2: var(--color-bg-2);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-tertiary: var(--color-ink-mut);
  --accent: var(--color-yellow);

  /* ---- Surfaces / lines ---- */
  --glass: rgba(255, 255, 255, 0.65);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(17, 24, 39, 0.1);
  --glass-border-strong: rgba(17, 24, 39, 0.18);
  --hairline: rgba(17, 24, 39, 0.12);
  /* Black divider that's solid in the centre and fades out toward both ends */
  --fade-line: linear-gradient(to right, transparent, rgba(17, 24, 39, 0.85) 50%, transparent);

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #60A5FA 0%, var(--color-yellow) 55%, var(--color-yellow-deep) 100%);
  --grad-text: linear-gradient(180deg, #111827 0%, #475569 100%);
  --grad-spotlight: radial-gradient(60% 60% at 50% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 70%);

  /* ---- Typography ----
     Display headings: Neue Montreal Light → Satoshi Light → General Sans Light.
     Body / UI: Inter. */
  --font-display: 'Neue Montreal', 'Satoshi', 'General Sans', 'Inter Tight', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* Weight tokens — thin, editorial display; regular sub-heads; medium UI */
  --fw-light: 300;     /* hero + section headlines */
  --fw-regular: 400;   /* sub-headlines, body, navigation */
  --fw-medium: 500;    /* buttons, wordmark, large stat numerals */
  --fw-semibold: 600;  /* emphasised headings */
  --fw-bold: 700;      /* hero stat figures, key outcome values */

  --fs-display: clamp(2.75rem, 1.4rem + 6.4vw, 6rem);    /* 44 → 96px   hero headlines (balanced) */
  --fs-h1: clamp(2.6rem, 1.3rem + 4.6vw, 4.5rem);        /* 42 → 72px   section headlines */
  --fs-h2: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);        /* 34 → 56px   section headlines */
  --fs-h3: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);         /* sub-headlines */
  --fs-lead: clamp(1.1rem, 0.98rem + 0.55vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-overline: 0.75rem;

  --lh-tight: 1.02;   /* hero — large light type sits close */
  --lh-snug: 1.1;
  --lh-body: 1.65;    /* generous, editorial body leading */
  --tracking-tight: -0.025em;  /* light display wants only a gentle pull-in */
  --tracking-hero: -0.03em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.18em;

  /* ---- Spacing ----
     Complete 8px scale: 4·8·12·16·24·32·40·48·56·64·80·96·120·160
     Index tokens (legacy refs) + px-intent rungs that fill the gaps. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  --space-40: 2.5rem;   /* 40 */
  --space-56: 3.5rem;   /* 56 */
  --space-80: 5rem;     /* 80 */
  --space-120: 7.5rem;  /* 120 */
  --space-160: 10rem;   /* 160 */
  --section-y: 72px;       /* section top padding — symmetric band */
  --section-y-end: 72px;   /* section bottom padding — symmetric (inter-section gap = 144px) */
  --nav-h: 74px;           /* fixed-header height — measured & overridden by JS from the actual header; anchors land flush beneath it */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Radius (institutional: sharp, confident, subtle premium corners) ----
     sm 6px = chips/controls · md 8px = cards & panels · lg 12px = images & team cards */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 12px; --radius-pill: 999px;

  /* ---- Elevation (soft, light-theme) ---- */
  --shadow-sm: 0 2px 8px rgba(20, 20, 16, 0.06);
  --shadow-md: 0 14px 34px -12px rgba(20, 20, 16, 0.14);
  --shadow-lg: 0 34px 70px -24px rgba(20, 20, 16, 0.22);
  --shadow-gold: 0 14px 38px -12px rgba(59, 130, 246, 0.42);
  --glow-gold: 0 0 0 1px rgba(17, 24, 39, 0.08);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s; --dur-base: 0.32s; --dur-slow: 0.6s; --dur-cinematic: 1.1s;

  /* ---- Z-index ---- */
  --z-base: 1; --z-raised: 10; --z-nav: 100; --z-overlay: 1000; --z-loader: 2000;
}