/* ==========================================================================
   Design Tokens — extracted from Figma
   ========================================================================== */

/* ---- @font-face ----------------------------------------------------------

   Vier gewichten, elk in romein en cursief. De huisstijl gebruikt ze alle
   vier: semibold (600) voor koppen, medium (500) voor intro's en labels,
   regular (400) voor lopende tekst en bold (700) voor het enkele accent.

   Tot de volledige levering van de foundry stonden hier alleen 400 en 700.
   Een browser lost een ontbrekend gewicht niet op door bij te tekenen maar
   door het dichtstbijzijnde te pakken: 500 werd 400 en 600 werd 700. Alles
   wat de CSS medium noemde stond dus als regular op het scherm en alles wat
   semibold heette als bold — de typografieklacht uit de feedbackronde in één
   regel samengevat.

   De bestanden komen uit scripts/fonts.ts (npm run assets:fonts); woff2 is
   het enige formaat, zie de toelichting daar.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/wf-aprello/wf-aprello-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Colors ----

     Eén op één overgenomen uit de Stijlgids (V2, augustus 2026), paragraaf
     2.2 Schermkleuren. Vier hoofdkleuren plus grijs, elk in zeven tinten van
     licht naar donker. De schaal loopt 100-200-400-600-800-1000-1200; dat
     zijn de zeven tinten uit de gids in dezelfde volgorde.

     Deze lijst is de bron. Staat een kleur hier niet in, dan hoort hij niet
     op de site. */

  /* Blue */
  --blue-100: #F1F9FF;
  --blue-200: #C8E5FF;
  --blue-400: #80C3FE;
  --blue-600: #4FA4FF;
  --blue-800: #0886FC;
  --blue-1000: #0054AD;
  --blue-1200: #002741;

  /* Green */
  --green-100: #F0FAF2;
  --green-200: #CFFFCB;
  --green-400: #12F4D2;
  --green-600: #02E9C6;
  --green-800: #00D2B3;
  --green-1000: #017D66;
  --green-1200: #004133;

  /* Yellow */
  --yellow-100: #FFFBF5;
  --yellow-200: #FFE8CC;
  --yellow-400: #FFB65D;
  --yellow-600: #FF981B;
  --yellow-800: #D17300;
  --yellow-1000: #8E4E00;
  --yellow-1200: #331E00;

  /* Pink */
  --pink-100: #FAF0F0;
  --pink-200: #FFDBE7;
  --pink-400: #FF80AE;
  --pink-600: #FF52A0;
  --pink-800: #E6007E;
  --pink-1000: #800054;
  --pink-1200: #24001A;

  /* Base */
  --base-100: #FFFFFF;
  --base-200: #F9F9F9;
  --base-400: #D6D6D6;
  --base-600: #A7A7A7;
  --base-800: #7C7C7C;
  --base-1000: #494949;
  --base-1200: #1A1A1A;

  /* ---- Typography ---- */

  --font-primary: 'WF Aprello', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-sora: 'Sora', sans-serif;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing ---- */
  --layer-gap: 10px;          /* gap between Layer 1 ↔ Layer 2, and Layer 2 ↔ nav */
  --page-padding-x: 120px;    /* horizontal padding for content sections */
  --section-gap: 80px;

  /* ---- Border Radius ---- */
  --radius-outer: 10px;
  --radius-card: 3px;
  --radius-small: 2px;
}