/* =========================================================================
   I Made It Films — Core tokens
   Import this in EVERY page. It defines colors, type, spacing, motion.
   ========================================================================= */

/* ---------- Web fonts ---------- */
/* Brand display face — Lantinghei SC. Self-hosted from /fonts. */
@font-face {
  font-family: 'Lantinghei SC';
  src: url('./fonts/Lantinghei_SC.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Workhorse families pulled from Google Fonts. Lantinghei is the brand voice;
   these support body, mono, and editorial roles. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============ BRAND PALETTE ============
     The system is stark: ink + paper, with one accent (signal red).
     Color is rare and meaningful — used for emphasis, never decoration.
     If a screen has more than the listed accent + ink + paper, you've gone wrong. */

  --imf-ink:        #0a0a0a;   /* Pure black (slightly softened) — primary text, primary surface */
  --imf-ink-2:      #161616;   /* Surface elevation 1 on dark */
  --imf-ink-3:      #242424;   /* Surface elevation 2 on dark / hairlines on dark */
  --imf-ink-4:      #3a3a3a;   /* Muted text on dark */

  --imf-paper:      #f4f1ea;   /* Warm ivory — primary light surface (NOT pure white; gives 16mm warmth) */
  --imf-paper-2:    #ebe7dd;   /* Surface elevation 1 on light */
  --imf-paper-3:    #d9d4c6;   /* Hairlines on light, dividers */
  --imf-paper-4:    #a09d98;   /* Muted text on light */

  --imf-bone:       #ffffff;   /* True white — RARE. For overlays only. Avoid as page bg. */

  --imf-signal:     #ffffff;   /* White — replaces signal red. */
  --imf-signal-deep:#cccccc;  /* Pressed/visited */

  --imf-spotlight:  #ffd64a;   /* Tape-yellow — caution, alerts, "NEW" stamps. Use sparingly. */

  /* Semantic mappings (use these in components, not raw values) */
  --imf-bg:           var(--imf-ink);
  --imf-bg-elevated:  var(--imf-ink-2);
  --imf-fg:           var(--imf-paper);
  --imf-fg-muted:     var(--imf-ink-4);
  --imf-rule:         var(--imf-ink-3);
  --imf-accent:       var(--imf-signal);

  /* "Light theme" overrides — apply via [data-theme="light"] or .imf-light */

  /* ============ TYPE ============ */
  /* Display: Lantinghei SC — the brand's voice. Distinctive humanist sans with
     a geometric latin set; carries the wordmark's character.
     Heavy: Archivo 800 for sub-heads where Lantinghei would feel too quiet.
     Body: Inter (workhorse, neutral, reads on dark).
     Mono: DM Mono — film slate / timecode / metadata.
     Editorial accent: Instrument Serif italic — for credits, pull-quotes, "directed by". */
  --imf-font-display: 'Lantinghei SC', 'Archivo Black', 'Helvetica Neue', sans-serif;
  --imf-font-heavy:   'Archivo', 'Helvetica Neue', sans-serif;
  --imf-font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --imf-font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;
  --imf-font-serif:   'Instrument Serif', 'Times New Roman', serif;

  /* Type scale — tight, with two distinct extremes (slate-tiny meta and poster-huge display) */
  --imf-fs-meta:    11px;   /* Slate metadata, timecodes, labels */
  --imf-fs-caption: 13px;
  --imf-fs-body:    16px;
  --imf-fs-body-lg: 18px;
  --imf-fs-h6:      20px;
  --imf-fs-h5:      24px;
  --imf-fs-h4:      32px;
  --imf-fs-h3:      44px;
  --imf-fs-h2:      64px;
  --imf-fs-h1:      96px;
  --imf-fs-poster:  152px;  /* Hero / poster-scale display */

  /* Letter-spacing — Archivo Black wants tight tracking; mono/labels want loose */
  --imf-track-tight:   -0.04em;
  --imf-track-display: -0.03em;
  --imf-track-body:    -0.005em;
  --imf-track-label:   0.14em;     /* Uppercase labels, slate metadata */
  --imf-track-mono:    0.02em;

  /* Line heights */
  --imf-lh-display:  0.92;
  --imf-lh-heading:  1.02;
  --imf-lh-body:     1.5;
  --imf-lh-tight:    1.15;

  /* ============ SPACING ============
     4px base, named like a film slate: T1..T8 (T = take). */
  --imf-t-0:  0;
  --imf-t-1:  4px;
  --imf-t-2:  8px;
  --imf-t-3:  12px;
  --imf-t-4:  16px;
  --imf-t-5:  24px;
  --imf-t-6:  32px;
  --imf-t-7:  48px;
  --imf-t-8:  64px;
  --imf-t-9:  96px;
  --imf-t-10: 128px;
  --imf-t-11: 192px;

  /* ============ RADIUS ============
     IMF is a hard-edge brand. 0 is the default. Slight rounding only on
     pill-style "tape" elements. NEVER soft-round large containers. */
  --imf-r-0:  0px;
  --imf-r-1:  2px;
  --imf-r-2:  4px;
  --imf-r-pill: 999px;

  /* ============ BORDERS ============ */
  --imf-bw-hair: 1px;
  --imf-bw-rule: 2px;
  --imf-bw-thick: 4px;
  --imf-bw-slab: 8px;       /* Used for slate stripes */

  /* ============ SHADOWS ============
     IMF prefers harsh offset shadows over soft drop shadows — like a print poster. */
  --imf-shadow-poster: 8px 8px 0 var(--imf-ink);
  --imf-shadow-poster-sm: 4px 4px 0 var(--imf-ink);
  --imf-shadow-card:    0 24px 48px -12px rgba(0,0,0,0.45);
  --imf-shadow-pop:     0 2px 0 var(--imf-ink);

  /* ============ MOTION ============
     Cuts, not crossfades. Curve is sharp ease-out, durations short. */
  --imf-dur-cut: 90ms;
  --imf-dur-fast: 160ms;
  --imf-dur-base: 240ms;
  --imf-dur-slow: 480ms;
  --imf-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --imf-ease-snap: cubic-bezier(0.7, 0, 0.2, 1);

  /* ============ LAYOUT ============ */
  --imf-container: 1280px;
  --imf-gutter: 24px;
  --imf-grid-cols: 12;
}

/* Light theme remap */
[data-theme="light"], .imf-light {
  --imf-bg:          var(--imf-paper);
  --imf-bg-elevated: var(--imf-paper-2);
  --imf-fg:          var(--imf-ink);
  --imf-fg-muted:    var(--imf-paper-4);
  --imf-rule:        var(--imf-paper-3);
}

/* ---------- Base reset / typography defaults ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--imf-bg);
  color: var(--imf-fg);
  font-family: var(--imf-font-body);
  font-size: var(--imf-fs-body);
  line-height: var(--imf-lh-body);
  letter-spacing: var(--imf-track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type primitives ---------- */
.imf-display {
  font-family: var(--imf-font-display);
  font-weight: 700;  /* Lantinghei reads heavy at 700; bumps higher only when stacked variable axes are present */
  letter-spacing: var(--imf-track-display);
  line-height: var(--imf-lh-display);
  text-transform: lowercase;  /* IMF house rule: display copy is lowercase. */
}
.imf-display em {
  /* Mixed-case emphasis: a single letter goes UPPERCASE — echoes the logo's "maDe / it" */
  font-style: normal;
  text-transform: uppercase;
  display: inline-block;
}

.imf-heavy {
  font-family: var(--imf-font-heavy);
  font-weight: 800;
  letter-spacing: var(--imf-track-tight);
  line-height: var(--imf-lh-heading);
}

.imf-label {
  font-family: var(--imf-font-mono);
  font-size: var(--imf-fs-meta);
  letter-spacing: var(--imf-track-label);
  text-transform: uppercase;
  font-weight: 500;
}

.imf-mono {
  font-family: var(--imf-font-mono);
  letter-spacing: var(--imf-track-mono);
}

.imf-serif {
  font-family: var(--imf-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Display sizes */
.imf-poster   { font-size: clamp(72px, 12vw, var(--imf-fs-poster)); }
.imf-h1       { font-size: clamp(56px, 8vw, var(--imf-fs-h1)); }
.imf-h2       { font-size: clamp(40px, 6vw, var(--imf-fs-h2)); }
.imf-h3       { font-size: var(--imf-fs-h3); }
.imf-h4       { font-size: var(--imf-fs-h4); }
.imf-h5       { font-size: var(--imf-fs-h5); }
.imf-h6       { font-size: var(--imf-fs-h6); }
.imf-body-lg  { font-size: var(--imf-fs-body-lg); line-height: 1.55; }
.imf-caption  { font-size: var(--imf-fs-caption); color: var(--imf-fg-muted); }

/* Selection */
::selection { background: var(--imf-paper); color: var(--imf-ink); }

/* ---------- Hairline rule (used everywhere) ---------- */
.imf-rule { border: 0; border-top: var(--imf-bw-hair) solid var(--imf-rule); margin: 0; }
.imf-rule--thick { border-top-width: var(--imf-bw-rule); }

/* ---------- Utility ---------- */
.imf-container { max-width: var(--imf-container); margin: 0 auto; padding: 0 var(--imf-gutter); }
.imf-grid { display: grid; grid-template-columns: repeat(var(--imf-grid-cols), 1fr); gap: var(--imf-gutter); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}