/* ============================================================
   Luminos Film — Foundations
   Colors and Type tokens. Single source of truth.
   ============================================================ */

/* --- Web fonts ---
   Switzer (display) and JetBrains Mono come from CDN.
   Inter (body) ships as local TTFs in /fonts — see @font-face block below. */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Inter — self-hosted. Optical size 18pt is the body default; 24pt
   covers headings up to ~32px; 28pt is reserved for display contexts.
   Browsers pick the right cut automatically when font-optical-sizing is auto. */

/* 18pt — body sizes (≤ ~18px) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter_18pt-Thin.ttf') format('truetype'); font-named-instance: 'Thin'; size-adjust: 100%; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter_18pt-Black.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); }

/* 24pt — sub-display family — exposed as 'Inter Display' for
   intermediate sizes (24–40px) when you need slightly tighter forms. */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter_24pt-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter_24pt-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter_24pt-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter_24pt-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_24pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter_24pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter_24pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter_24pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter_24pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter_24pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter_24pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter_24pt-Black.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter_24pt-BlackItalic.ttf') format('truetype'); }

/* 28pt — true display sizes (≥ ~40px). Use 'Inter Display XL' when you want
   the tightest fits for very large body callouts. Most layouts won't need this. */
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter_28pt-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter_28pt-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter_28pt-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter_28pt-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_28pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter_28pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_28pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter_28pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_28pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter_28pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter_28pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter_28pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter_28pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter_28pt-Black.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter_28pt-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---------- Color: base ---------- */
  --bg:              #000000;        /* page background */
  --bg-secondary:    #1c1c1c;        /* cards, hover surfaces */
  --bg-dark:         #161616;        /* deep surface */
  --fg:              #ffffff;        /* primary foreground */
  --gray:            #aeaeae;        /* secondary text, muted */

  /* ---------- Color: accents ---------- */
  --accent-blue:     #2467e3;        /* primary brand accent */
  --accent-light:    #0099ff;        /* highlight / hyperlink */

  /* ---------- Color: semantic alpha (built from white) --------
     Hairline borders, subtle hovers and overlays are all
     expressed as foreground/N — keep this consistent. */
  --fg-90:  rgba(255, 255, 255, 0.90);
  --fg-80:  rgba(255, 255, 255, 0.80);
  --fg-70:  rgba(255, 255, 255, 0.70);
  --fg-60:  rgba(255, 255, 255, 0.60);
  --fg-50:  rgba(255, 255, 255, 0.50);
  --fg-40:  rgba(255, 255, 255, 0.40);
  --fg-30:  rgba(255, 255, 255, 0.30);
  --fg-20:  rgba(255, 255, 255, 0.20);
  --fg-10:  rgba(255, 255, 255, 0.10);   /* default hairline */
  --fg-05:  rgba(255, 255, 255, 0.05);   /* hover surface */

  /* ---------- Color: scrim / overlay ---------- */
  --scrim-top:    rgba(0, 0, 0, 0.85);   /* header gradient */
  --scrim-bottom: rgba(0, 0, 0, 0.80);   /* hero bottom fade */

  /* ---------- Type: families ---------- */
  --font-display:  'Switzer', 'Inter Display XL', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display-body: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type: scale (fluid via clamp on real components) ---
     Fixed sizes shown here are the lower bounds. Display sizes
     ramp on viewport — see semantic classes below. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 18px;       /* body default — note: site sets 18px not 16 */
  --fs-md:   20px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  44px;
  --fs-3xl:  64px;
  --fs-4xl:  96px;
  --fs-display: 160px;   /* hero ceiling */

  --lh-tight: 0.85;       /* hero / display */
  --lh-snug:  1.1;
  --lh-body:  1.6;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-tighter: -0.04em;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.18em;   /* eyebrows, badges */

  /* ---------- Spacing rhythm ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;       /* py-24 between sections */
  --space-10: 144px;

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --max-wide:    1500px;
  --max-page:    1724px;          /* outermost frame on home */
  --gutter-sm:   24px;
  --gutter-md:   48px;
  --gutter-lg:   80px;
  --gutter-xl:   112px;

  /* ---------- Radii (used sparingly) ---------- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 9999px;       /* CTA pill, filter chips */
  --radius-card: 16px;          /* tucked label corner on project card */

  /* ---------- Borders ---------- */
  --hairline: 1px solid var(--fg-10);
  --hairline-strong: 1px solid var(--fg-20);
  --pill-border: 1px solid var(--fg);

  /* ---------- Motion ---------- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* most everything */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* image zooms */
  --dur-fast:   200ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-slower: 1200ms;        /* image hover scale */
}

/* ============================================================
   Semantic type classes
   Drop these on real elements. Sizes are fluid via clamp() so
   the same class works hero-large or sidebar-small.
   ============================================================ */

.lf-hero {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  font-size: clamp(60px, 10vw, 160px);
  color: var(--fg);
}

.lf-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--fg);
}

.lf-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  color: var(--fg);
}

.lf-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--fg);
}

.lf-cta {                            /* "Let's Talk" footer slug */
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--fg);
}

.lf-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-80);
}

.lf-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: var(--lh-relaxed);
  color: var(--fg-80);
}

.lf-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-70);
}

.lf-eyebrow {                        /* tiny uppercase label */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-40);
}

.lf-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--gray);
}

.lf-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-40);
}

.lf-num {                            /* numbered list (Services 01,02) */
  font-family: var(--font-body);
  font-feature-settings: 'tnum' 1;
  font-size: var(--fs-sm);
  color: var(--fg-30);
}