/* ==========================================================================
   Filmwerkwijs Design System – Foundations
   Source: FilmWerkWijs.nl.fig (Typografie page + Design page usage)
   ========================================================================== */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  /* Google Fonts substitution — originals reference "Inter Tight"
     variable; Inter (uploaded) is used as a fallback with very similar
     metrics. Request Inter Tight TTFs to remove this substitution. */
  src: url("./fonts/Inter-VariableFont.ttf") format("truetype-variations");
}

:root {
  /* ---------------------------------------------------------------
     BRAND COLORS
     Source: Figma top-colors metadata
     --------------------------------------------------------------- */

  /* Primary — Filmwerkwijs Navy */
  --fw-navy: #221659;          /* rgb(34,22,89)   — 1086× uses */
  --fw-navy-900: #180551;      /* rgb(24,5,81)    — title variants */
  --fw-navy-800: #2C1F66;      /* ~rgb(44,31,102) — body-on-light */

  /* Brand accents (the vibrant deck) */
  --fw-yellow: #F9EC31;        /* rgb(249,236,49) — primary CTA */
  --fw-yellow-deep: #CDC226;   /* rgb(205,194,38) — pill tag bg */
  --fw-yellow-soft: #FEF255;   /* rgb(254,242,85) — soft fill */
  --fw-mint: #00E69E;          /* rgb(0,230,158)  — card tint */
  --fw-mint-soft: #6DFFBF;     /* rgb(109,255,191)*/
  --fw-mint-bg: #E7FFF2;       /* rgb(231,255,242)*/
  --fw-cyan: #2ADDE6;          /* rgb(42,221,230) — card tint */
  --fw-cyan-soft: #77F0F4;     /* rgb(119,240,244)*/
  --fw-purple: #9747FF;        /* rgb(151,71,255) — guide strokes */

  /* Neutrals */
  --fw-white: #FFFFFF;
  --fw-cream: #FDFCFA;         /* rgb(253,252,250) — card bg */
  --fw-beige: #F9F6EF;         /* rgb(249,246,239) — page bg */
  --fw-beige-2: #EFE8D3;       /* rgb(239,232,211)*/
  --fw-gray-25: #FAF9FB;       /* rgb(250,249,251)*/
  --fw-gray-50: #F5F5F5;       /* rgb(245,245,245) — nav border */
  --fw-gray-75: #F1F0F5;       /* rgb(241,240,245)*/
  --fw-gray-100: #EAEAEB;      /* rgb(234,234,235) — accordion stroke */
  --fw-gray-150: #E4E3E6;      /* rgb(228,227,232)*/
  --fw-gray-200: #E0DFE6;      /* rgb(224,223,230)*/
  --fw-gray-300: #D4D4D4;      /* rgb(212,212,212)*/
  --fw-gray-400: #D3D2DB;      /* rgb(211,210,219) — footer meta */
  --fw-gray-500: #737373;      /* rgb(115,115,115) — muted body */
  --fw-gray-600: #717573;      /* rgb(113,117,115)*/
  --fw-gray-800: #231F20;      /* rgb(35,31,32)*/
  --fw-gray-900: #171717;      /* rgb(23,23,23)*/

  /* Shadow + overlay */
  --fw-shadow-card: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
  --fw-shadow-lift: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
  --fw-overlay-06: rgba(0, 0, 0, 0.06);
  --fw-overlay-15: rgba(34, 22, 89, 0.15);

  /* ---------------------------------------------------------------
     SEMANTIC COLORS
     --------------------------------------------------------------- */
  --fg-1: var(--fw-navy);         /* default text */
  --fg-2: var(--fw-navy-800);     /* slightly softer body */
  --fg-muted: var(--fw-gray-500);
  --fg-inverse: #FFFFFF;
  --fg-inverse-muted: var(--fw-gray-400);

  --bg-page: var(--fw-white);
  --bg-page-alt: var(--fw-beige);
  --bg-surface: var(--fw-cream);
  --bg-elevated: var(--fw-white);
  --bg-inverse: var(--fw-navy);

  --border-subtle: var(--fw-gray-100);
  --border-faint: var(--fw-gray-50);
  --border-on-navy: rgba(255, 255, 255, 0.12);

  --accent-primary: var(--fw-yellow);
  --accent-primary-fg: var(--fw-navy);

  /* ---------------------------------------------------------------
     TYPE
     Stack: Inter Tight is the workhorse — display + body + UI.
     DM Sans shows up on a few nav-menu labels (legacy / dropdown).
     --------------------------------------------------------------- */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-nav:  "DM Sans", "Inter Tight", sans-serif;

  /* Weights actually used in the Figma */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Body size scale (from Typografie - Desktop page) */
  --text-xxs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-base:16px;
  --text-lg:  17px;   /* canonical body / footer */
  --text-xl:  18px;   /* nav links, card body */
  --text-2xl: 20px;   /* subtitle / accordion title */
  --text-3xl: 24px;   /* card heading */
  --text-4xl: 30px;   /* section heading */
  --text-5xl: 40px;
  --text-6xl: 48px;
  --text-7xl: 56px;   /* hero */
  --text-8xl: 72px;
  --text-9xl: 96px;
  --text-display: 216px;

  /* Line-heights */
  --lh-none:  1.0;
  --lh-tight: 1.15;
  --lh-base:  1.30;
  --lh-loose: 1.50;

  /* ---------------------------------------------------------------
     SPACING / RADIUS / SHADOW
     --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;    /* small buttons / dropdown arrow well */
  --radius-xl: 24px;    /* buttons, cards */
  --radius-2xl: 32px;   /* top nav bar */
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-7xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
/* The Filmwerkwijs hero uses bold+light on the SAME visual line */
.t-h1-light { font-weight: var(--fw-light); }

h2, .t-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

h3, .t-h3 {
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-base);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

h4, .t-h4 {
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

p, .t-body {
  font-size: var(--text-lg);
  line-height: var(--lh-base);
  color: inherit;
  margin: 0;
  text-wrap: pretty;
}

.t-body-lg  { font-size: var(--text-xl); line-height: var(--lh-base); }
.t-body-sm  { font-size: var(--text-base); line-height: var(--lh-base); }
.t-subtitle { font-size: var(--text-2xl); line-height: var(--lh-base); font-weight: var(--fw-regular); }
.t-meta     { font-size: var(--text-lg); line-height: var(--lh-base); color: var(--fg-inverse-muted); }
.t-button   { font-size: var(--text-base); font-weight: var(--fw-bold); line-height: 1.1; }
.t-link     { font-weight: var(--fw-bold); color: var(--fg-1); text-decoration: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--fw-yellow); color: var(--fw-navy); }