/* Dutchino - design tokens. Dutch identity: flag blue / red, national orange (oranje), Delft blue.
   Every colour used in the CSS comes from here. Author: SPSDEVNIC.NET */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand - the Netherlands */
  --nl-blue: #21468b;        /* flag blue: primary */
  --nl-blue-600: #1b3a75;
  --nl-blue-100: #dfe7f5;
  --nl-navy: #142c5c;        /* headings, footer */
  --nl-red: #ae1c28;         /* flag red: emphasis, badges (not errors) */
  --nl-red-100: #f8e3e5;
  --oranje: #ff7a00;         /* national orange: primary actions */
  --oranje-600: #e06a00;
  --oranje-700: #b85600;     /* orange text on light backgrounds (contrast) */
  --oranje-50: #fff3e8;
  --delft-50: #eef3fb;       /* page background with a Delft tile feel */
  --delft-200: #c9d6ee;

  /* neutrals */
  --surface: #ffffff;
  --bg: #f6f8fc;
  --line: #e3e8f2;
  --text: #1d2939;
  --muted: #667085;
  --white: #ffffff;

  /* states (errors always with icon + text, never colour alone) */
  --success: #1f8a5b;
  --success-50: #e7f5ee;
  --warning: #b37e00;
  --warning-50: #fdf5dc;
  --danger: #c8372d;
  --danger-50: #fbe9e7;

  /* typography */
  --font-fa: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-nl: "Inter", "Segoe UI", Arial, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-3xl: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --lh: 1.85;

  /* shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 44, 92, .06);
  --shadow: 0 6px 24px -12px rgba(20, 44, 92, .18);
  --shadow-lg: 0 18px 48px -20px rgba(20, 44, 92, .28);

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px;
  --container: 1160px;

  --focus: 0 0 0 3px rgba(255, 122, 0, .45);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }