/* ==========================================================================
   Toetsmoment design tokens
   Bron: designsysteem in docs/ontwerp/Toetsmoment.html.
   Componenten gebruiken ALLEEN deze variabelen, nooit losse kleurcodes.
   ========================================================================== */

/* Lettertypen: zelf gehost (geen Google Fonts, AVG). Licentie: SIL OFL. */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Koppenletter: Bricolage Grotesque, variabel in dikte en optische maat (licentie: fonts/bricolage-grotesque-OFL.txt). */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Woordmerk van het logo: Figtree SemiBold (licentie: fonts/figtree-OFL.txt). Alleen voor "Toetsmoment" in TmLogo. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/figtree-semibold.woff2") format("woff2");
}

:root {
    /* ---- Logo (map logo/, richting 2B) ---- */
    --tm-logo-inkt: #0F2B46;
    --tm-logo-groen: #1F9D55;
    --tm-logo-groen-donker: #7FD4A0;   /* vinkje op een donkere achtergrond */
    --tm-font-logo: "Figtree", "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

    /* ---- Basiskleuren (designsysteem) ---- */
    --tm-inktblauw: #16324A;
    --tm-accent-toets: #3C6F5E;
    --tm-accent-examen: #2A5A80;
    --tm-eucalyptus: #9FBFAE;
    --tm-mistblauw: #DCE7F0;
    --tm-grijsblauw: #5C7183;
    --tm-gebroken-wit: #FAFBF8;
    --tm-lijn: #D6E2EC;
    --tm-fout: #A2453C;

    /* ---- Afgeleide tinten uit het ontwerp ---- */
    --tm-tekst-zacht: #42596E;
    --tm-lijn-licht: #E7EEF4;
    --tm-lijn-sterk: #C9D9E6;
    --tm-vlak-zacht: #F3F7FA;
    --tm-vlak-wit: #FFFFFF;
    --tm-uitgeschakeld-tekst: #9FAEBC;
    --tm-voetnoot-tekst: #B9CBDA;

    /* ---- Betekenis ---- */
    --tm-tekst: var(--tm-inktblauw);
    --tm-bijschrift: var(--tm-grijsblauw);
    --tm-grond: #E9EFF4;
    --tm-vlak: var(--tm-gebroken-wit);
    --tm-rand: var(--tm-mistblauw);
    --tm-focus: var(--tm-accent-examen);
    --tm-link: var(--tm-accent-examen);

    /* ---- Statuslabels en meldingen ---- */
    --tm-goed-bg: #EDF4F0;
    --tm-goed-rand: #C7DCD2;
    --tm-goed-tekst: #22453A;
    --tm-fout-bg: #FAF0EE;
    --tm-fout-rand: #E3C9C4;
    --tm-fout-tekst: #7A362D;
    --tm-info-bg: var(--tm-mistblauw);
    --tm-info-rand: var(--tm-lijn-sterk);
    --tm-info-tekst: var(--tm-inktblauw);
    --tm-examen-keuze-bg: #EEF3F8;
    --tm-overlay: rgba(22, 50, 74, 0.85);

    /* ---- Fris groen voor de startpagina: springender dan het rustige toetsgroen ---- */
    --tm-groen-fris: #22A565;          /* vlakken, gloed en vinkjes */
    --tm-groen-fris-tekst: #157A49;    /* groene tekst op licht (contrast 4,6:1) */
    --tm-limoen: #C8EE7A;              /* highlight en verloop */
    --tm-schaduw-document: 0 12px 40px rgba(22, 50, 74, 0.10);

    /* ---- Typografie ---- */
    --tm-font-kop: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --tm-gewicht-kop: 600;
    --tm-font-tekst: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --tm-maat-display: 44px;
    --tm-maat-kop: 30px;
    --tm-maat-kop-klein: 24px;
    --tm-maat-subkop: 19px;
    --tm-maat-body: 17px;
    --tm-maat-standaard: 15px;
    --tm-maat-bijschrift: 14px;
    --tm-maat-klein: 13px;
    --tm-maat-label: 12px;
    --tm-regelafstand: 1.6;
    --tm-letterafstand-label: 0.14em;

    /* ---- Vorm en ruimte ---- */
    --tm-radius-klein: 8px;
    --tm-radius: 10px;
    --tm-radius-middel: 12px;
    --tm-radius-groot: 14px;
    --tm-radius-pil: 999px;
    --tm-hoogte-bediening: 44px;
    --tm-ruimte-1: 4px;
    --tm-ruimte-2: 8px;
    --tm-ruimte-3: 12px;
    --tm-ruimte-4: 16px;
    --tm-ruimte-5: 20px;
    --tm-ruimte-6: 24px;
    --tm-ruimte-8: 32px;
    --tm-ruimte-10: 40px;
    --tm-ruimte-12: 48px;
    --tm-zijmenu-breedte: 256px;
    --tm-inhoud-max: 1160px;
}