/* ==========================================================================
   Hard IJs design tokens
   Gegenereerd uit tokens.json van het Hard IJs-designsystem (versie 1,
   gesynchroniseerd 2026-09-18). Bron: https://claude.ai/artifact/R8T6BBeX8t6Fnw1BKT2iTV
   Niet met de hand wijzigen: pas het designsystem aan en genereer opnieuw.
   Alleen het donkere thema; het lichte is voor e-mail en print.
   ========================================================================== */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/familjengrotesk-latin-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geistmono-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleur */
  --hi-ijs: #06080B;
  --hi-ijs-2: #0F1114;
  --hi-ijswit: #EEF2F5;
  --hi-rijp-75: rgba(238,242,245,0.75);
  --hi-rijp-55: rgba(238,242,245,0.55);
  --hi-rijp-30: rgba(238,242,245,0.30);
  --hi-rijp-14: rgba(238,242,245,0.14);
  --hi-rijp-08: rgba(238,242,245,0.08);
  --hi-punt: #EE0023;
  --hi-punt-diep: #D1001F;
  --hi-punt-was: #26070E;
  --hi-brand-50: #FFF1F3;
  --hi-brand-100: #FFD6DC;
  --hi-brand-200: #FFADB9;
  --hi-brand-300: #FF778B;
  --hi-brand-400: #FF415D;
  --hi-brand-500: #FF183A;
  --hi-brand-600: #EE0023;
  --hi-brand-700: #D1001F;
  --hi-brand-800: #B2001A;
  --hi-brand-900: #830013;
  --hi-ink-100: #DBDFE2;
  --hi-ink-200: #CED1D4;
  --hi-ink-300: #A8ACAF;
  --hi-ink-500: #6E7174;
  --hi-ink-700: #404246;
  --hi-ink-900: #06080B;
  --hi-ok: #4DD39A;
  --hi-let-op: #E6B84A;
  --hi-fout: #FF778B;
  --hi-kras-kleur: var(--hi-ijswit);

  /* Typografie */
  --hi-font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --hi-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hi-display-xl-size: clamp(64px, 14vw, 240px);
  --hi-display-xl-size-mobiel: 22vw;
  --hi-display-xl-line: 0.88;
  --hi-display-xl-weight: 700;
  --hi-display-xl-tracking: -0.03em;
  --hi-display-lg-size: clamp(48px, 8vw, 128px);
  --hi-display-lg-line: 0.92;
  --hi-display-lg-weight: 700;
  --hi-display-lg-tracking: -0.03em;
  --hi-h1-size: clamp(36px, 5vw, 72px);
  --hi-h1-line: 1.0;
  --hi-h1-weight: 700;
  --hi-h1-tracking: -0.025em;
  --hi-h2-size: clamp(28px, 3.5vw, 48px);
  --hi-h2-line: 1.05;
  --hi-h2-weight: 700;
  --hi-h2-tracking: -0.02em;
  --hi-h3-size: 24px;
  --hi-h3-line: 1.15;
  --hi-h3-weight: 600;
  --hi-h3-tracking: -0.015em;
  --hi-body-lg-size: 22px;
  --hi-body-lg-line: 1.45;
  --hi-body-lg-weight: 400;
  --hi-body-md-size: 18px;
  --hi-body-md-line: 1.5;
  --hi-body-md-weight: 400;
  --hi-body-sm-size: 15px;
  --hi-body-sm-line: 1.5;
  --hi-body-sm-weight: 400;
  --hi-cijfer-size: clamp(56px, 9vw, 144px);
  --hi-cijfer-line: 1;
  --hi-cijfer-weight: 500;
  --hi-cijfer-tracking: -0.02em;
  --hi-label-size: 12px;
  --hi-label-line: 16px;
  --hi-label-weight: 500;
  --hi-label-tracking: 0.08em;
  --hi-kicker-size: 13px;
  --hi-kicker-line: 16px;
  --hi-kicker-weight: 500;
  --hi-kicker-tracking: 0.04em;

  /* Ruimte */
  --hi-space-0: 0px;
  --hi-space-1: 4px;
  --hi-space-2: 8px;
  --hi-space-3: 12px;
  --hi-space-4: 16px;
  --hi-space-5: 24px;
  --hi-space-6: 32px;
  --hi-space-7: 48px;
  --hi-space-8: 64px;
  --hi-space-9: 96px;
  --hi-space-10: 128px;
  --hi-space-11: 160px;
  --hi-space-12: 192px;

  /* Hoeken */
  --hi-radius: 0px;

  /* Schaduw */
  --hi-shadow: none;

  /* Beweging */
  --hi-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --hi-dur-fast: 150ms;
  --hi-dur-default: 200ms;
  --hi-dur-reveal: 400ms;
  --hi-dur-kras: 800ms;

  /* Raster */
  --hi-container-max: 1280px;
  --hi-container-reading: 640px;
  --hi-gutter-mobile: 20px;
  --hi-gutter-desktop: 48px;
  --hi-breekpunt-sm: 640px;
  --hi-breekpunt-md: 960px;
  --hi-breekpunt-lg: 1280px;

  /* Kras */
  --hi-kras-dikte: 1px;
}