/* =========================================================
   Sklair Films — Colors & Type
   Extracted from /websteve/css/style.css (sklairfilms.com)
   ========================================================= */

/* Inter — primary brand font, loaded from Google Fonts (matches sklairfilms.com).
   Local TTF stays declared as an offline fallback. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Inter Local';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-regular.ttf') format('truetype');
}

:root {
  /* ---------- BRAND COLOR PALETTE ---------- */
  /* Reds — primary brand spine */
  --barn-red:       #780000;   /* deepest red, hero gradient anchor */
  --fire-brick:     #c1121f;   /* the brand red. CTAs, accents, active state */
  --fire-brick-hover:#a00f1a;  /* hover/pressed of fire-brick */
  --logo-red:       #D30000;   /* exact red used in the "d" detail of the logo */
  --hero-red-mid:   #8b0000;   /* mid stop in the hero gradient */
  --red-soft:       #ff6b6b;   /* used on dark bg for "Featured" pills */

  /* Blues — supporting "documentary / archival" cool */
  --prussian-blue:  #003049;
  --dark-blue:      #001a28;   /* header bg, footer top, deep neutrals */
  --footer-bottom:  #000d14;   /* footer gradient end */
  --air-superiority:#669bbc;   /* secondary accent, links on dark, icons */

  /* Cream */
  --papaya-whip:    #fdf0d5;

  /* Neutrals */
  --white:          #ffffff;
  --black:          #000000;
  --gray-100:       #f3f4f6;
  --gray-200:       #e5e7eb;
  --gray-800:       #1f2937;
  --gray-900:       #111827;

  /* Dark surfaces (cinematic film-look) */
  --bg-near-black:  #0a0a0a;   /* most-dark sections start here */
  --bg-deep:        #1a1a1a;   /* most-dark sections end here */

  /* Award gold */
  --gold:           #fbbf24;

  /* Text — light surfaces */
  --text:           var(--black);
  --text-muted:     #4b5563;
  --text-soft:      #6b7280;

  /* Text — dark surfaces */
  --text-on-dark:           #ffffff;
  --text-on-dark-70:        rgba(255,255,255,0.7);
  --text-on-dark-60:        rgba(255,255,255,0.6);
  --text-on-dark-50:        rgba(255,255,255,0.5);
  --text-footer:            #d1d5dc;
  --text-footer-subtitle:   #99a1af;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', 'Inter Local', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (matches the site's tailwind-style tokens) */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.875rem;    /* 14 */
  --text-base:  1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.25rem;     /* 20 */
  --text-2xl:   1.5rem;      /* 24 */
  --text-3xl:   1.875rem;    /* 30 */
  --text-4xl:   2.25rem;     /* 36 */
  --text-5xl:   3rem;        /* 48 */
  --text-6xl:   3.75rem;     /* 60 */
  --text-7xl:   4.5rem;      /* 72 */

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;         /* used for hero & section titles */

  /* Tracking */
  --track-tight:   -0.02em;  /* hero/display headings */
  --track-normal:   0;
  --track-wide:     0.05em;
  --track-wider:    0.1em;   /* uppercase eyebrows */
  --track-widest:   0.15em;  /* "Scroll" indicator, small caps labels */

  /* Leading */
  --lh-tight:   1;           /* hero hero */
  --lh-snug:    1.1;         /* section titles */
  --lh-normal:  1.5;         /* body baseline */
  --lh-relaxed: 1.7;         /* testimonials */
  --lh-loose:   1.8;         /* long-form descriptions */

  /* ---------- LAYOUT / SPACING ---------- */
  --container-max-width: 1280px;   /* max-w-7xl */
  --header-height: 4.5rem;

  /* Radii */
  --r-sm:    0.25rem;   /* 4 — small buttons (.btn), images */
  --r-md:    0.375rem;  /* 6 — form inputs */
  --r-lg:    0.75rem;   /* 12 — film cards */
  --r-xl:    1rem;      /* 16 — testimonial cards */
  --r-pill:  9999px;    /* pills: nav buttons, badges, CTAs */

  /* Shadow system */
  --shadow-sm:     0 4px 20px rgba(0,0,0,0.20);
  --shadow-md:     0 8px 30px rgba(0,0,0,0.30);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.30);
  --shadow-card:   0 20px 40px rgba(0,0,0,0.10);
  --shadow-film:   0 20px 60px rgba(0,0,0,0.50);  /* cinematic card */

  /* Motion */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);   /* default `ease` */
  --t-fast:  0.2s;
  --t-base:  0.3s;
  --t-slow:  0.5s;
}

/* =========================================================
   Semantic / element defaults
   ========================================================= */

html { font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--white); color: var(--text); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

h2, .h2 {
  font-weight: var(--w-black);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

h3, .h3 {
  font-weight: var(--w-bold);
  font-size: var(--text-2xl);
  line-height: 1.2;
}

h4, .h4 {
  font-weight: var(--w-bold);
  font-size: var(--text-xl);
}

p { line-height: var(--lh-loose); }

/* Eyebrow label — used everywhere above section titles */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fire-brick);
}

/* Pill eyebrow — translucent over photo / video */
.eyebrow-pill {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.90);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}

/* "Featured" red pill (on dark) */
.eyebrow-pill-red {
  display: inline-block;
  padding: 0.4rem 1rem;
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  background: rgba(193,18,31,0.15);
  border: 1px solid rgba(193,18,31,0.30);
  color: var(--red-soft);
  border-radius: var(--r-pill);
}