/*
 * Fonts, reset en typografie. Gids §3.
 *
 * Geen hexwaarden: alles verwijst naar tokens.css.
 */

/* ============================================================================
   IBM Plex, zelf gehost
   ============================================================================
   Uit @ibm/plex-sans 1.1.0 en @ibm/plex-mono 2.5.0, subsets Latin1 en Latin2 — samen dekken die
   het Nederlands, de Europese valuta en de tekens die in een technische interface voorkomen.
   De licentie (SIL OFL 1.1) staat in fonts/OFL.txt en moet meegeleverd blijven.

   Geen CDN: dit draait on-prem, mogelijk zonder internet (SPEC 14.1).

   local() is bewust WEGGELATEN, terwijl de meegeleverde CSS van IBM het wel gebruikt. Een lokaal
   geïnstalleerde IBM Plex kan een andere versie zijn en dan rendert dezelfde pagina op twee
   machines verschillend — precies wat je bij een gids die maten tot op de halve pixel vastlegt
   niet wil.

   font-display: swap — de tekst is meteen leesbaar in de fallback en wisselt daarna. Bij een
   beheerinterface die niemand als eerste indruk ziet is dat beter dan een lege pagina.
   ============================================================================ */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Medium-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Bold-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
        U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
        U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Medium-Latin2.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1,
        U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4,
        U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

/* ============================================================================
   Reset — alleen wat nodig is
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Voorkomt dat de layout verspringt tussen een pagina met en zonder scrollbar. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--size-body);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--brand-2);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Zichtbare toetsenbordfocus is een kwaliteitsondergrens. De gids beperkt alleen de focusstijl
   van FORMULIERVELDEN tot de randkleurwissel (zie .field in components.css); voor knoppen, links
   en navigatie schrijft hij niets voor, en daar hoort een echte ring. */
:focus-visible {
    outline: 2px solid var(--focus-border);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   Typografie — gids §3
   ============================================================================ */

.page-title {
    font-size: var(--size-page-title);
    font-weight: 700;
    letter-spacing: var(--tracking-page-title);
    line-height: 1.25;
}

/* §6: "Onder elke titel staat één zin die uitlegt wat het object is en waarom het bestaat."
   Die zin is verplicht, niet optioneel — vandaar een eigen klasse in plaats van een losse <p>. */
.page-lede {
    max-width: 78ch;
    margin-top: 5px;
    color: var(--text-2);
}

.card-title {
    font-size: var(--size-card-title);
    font-weight: 600;
    line-height: 1.3;
}

.stat-value {
    font-size: var(--size-stat);
    font-weight: 700;
    letter-spacing: var(--tracking-stat);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.section-label {
    font-size: var(--size-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
}

/* Alles wat een machine leest — id's, URI's, versies, tijden, secrets (§1 en §3). */
.mono {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    font-weight: 400;
}

.mono-small {
    font-family: var(--font-mono);
    font-size: var(--size-mono-small);
    font-weight: 400;
}

/* §3: "getallen die vergeleken worden krijgen font-variant-numeric: tabular-nums." */
.numeric {
    font-variant-numeric: tabular-nums;
}

.text-2 {
    color: var(--text-2);
}

.text-3 {
    color: var(--text-3);
}

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