/* ==========================================================================
   MemoTrain design tokens
   Bron: docs/ontwerp/MemoTrain.html, logo-richting A (MT-71 tot MT-75).
   Componenten gebruiken ALLEEN deze variabelen, nooit losse kleurcodes.
   Let op: MemoTrain gebruikt de prefix --mem-, Toetsmoment gebruikt --tm-.
   ========================================================================== */

/* Lettertypen: zelf gehost (geen Google Fonts, AVG). Licentie: SIL OFL, zie de OFL-bestanden in fonts/. */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/outfit-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: "Outfit";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/outfit-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: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-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: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-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;
}

:root {
    /* ---- Logo (richting A: stapel oefenkaarten met een vonk) ---- */
    --mem-logo-kaart: #6C4BF6;
    --mem-logo-kaart-achter: #C3B0FF;
    --mem-logo-kaart-achter-donker: #4A32A8;   /* achterkaart op een donkere achtergrond */
    --mem-logo-kaart-licht: #8C6BFF;           /* voorkaart op een donkere achtergrond */
    --mem-logo-vonk: #FF8A3D;
    --mem-logo-vonk-licht: #FFA463;

    /* ---- Basiskleuren ---- */
    --mem-inkt: #24184A;
    --mem-paars: #6C4BF6;
    --mem-paars-donker: #5433E0;
    --mem-paars-zacht: #EDE7FE;
    --mem-paars-rand: #CDBEFB;

    /* Oranje is uitsluitend voor beloning: reeksen, badges en confetti (MT-73). */
    --mem-oranje: #FF8A3D;
    --mem-oranje-zacht: #FFF0E4;
    --mem-oranje-tekst: #B44A09;

    --mem-goed: #12A67A;
    --mem-goed-zacht: #E4F7F0;
    --mem-goed-rand: #BEEADB;
    --mem-goed-tekst: #0A6B4F;

    --mem-fout: #E24A4A;
    --mem-fout-zacht: #FDECEC;
    --mem-fout-rand: #F6CFCF;
    --mem-fout-tekst: #B02525;

    /* ---- Badges (MT-64): elke soort een eigen kleur, licht naar donker voor diepte ---- */
    --mem-badge-reeks-licht: #FFB067;
    --mem-badge-reeks-donker: #F2700B;
    --mem-badge-vragen-licht: #9C7BFF;
    --mem-badge-vragen-donker: #5433E0;
    --mem-badge-gebied-licht: #3DD9A4;
    --mem-badge-gebied-donker: #0A8C63;
    --mem-badge-dagen-licht: #FFCF5C;
    --mem-badge-dagen-donker: #D98E00;
    /* Nog niet verdiend: grijs, maar wel zichtbaar zodat je ziet wat er te halen valt. */
    --mem-badge-leeg-licht: #DCD7EA;
    --mem-badge-leeg-donker: #B4AAC9;

    /* ---- Betekenis ---- */
    --mem-grond: #F7F4FF;
    --mem-vlak: #FFFFFF;
    --mem-vlak-zacht: #FCFAFF;
    --mem-tekst: var(--mem-inkt);
    --mem-tekst-zacht: #4A4067;
    --mem-bijschrift: #6B5F8C;
    --mem-lijn: #E4DCFB;
    --mem-lijn-licht: #F0EAFE;
    --mem-uitgeschakeld: #B4AAC9;
    --mem-focus: var(--mem-paars);
    --mem-link: var(--mem-paars-donker);
    --mem-overlay: rgba(36, 24, 74, 0.82);

    /* ---- Typografie ---- */
    --mem-font-kop: "Outfit", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --mem-font-tekst: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --mem-gewicht-kop: 600;
    --mem-maat-display: 44px;
    --mem-maat-kop: 30px;
    --mem-maat-kop-klein: 24px;
    --mem-maat-subkop: 19px;
    --mem-maat-body: 17px;
    --mem-maat-standaard: 16px;
    --mem-maat-bijschrift: 14px;
    --mem-maat-klein: 13px;
    --mem-maat-label: 12px;
    --mem-regelafstand: 1.65;
    --mem-letterafstand-label: 0.16em;
    --mem-letterafstand-kop: -0.01em;

    /* ---- Vorm en ruimte: ronder en ruimer dan Toetsmoment (MT-75) ---- */
    --mem-radius-klein: 10px;
    --mem-radius: 14px;
    --mem-radius-groot: 20px;
    --mem-radius-xl: 26px;
    --mem-radius-pil: 999px;
    --mem-hoogte-bediening: 52px;
    --mem-ruimte-1: 4px;
    --mem-ruimte-2: 8px;
    --mem-ruimte-3: 12px;
    --mem-ruimte-4: 16px;
    --mem-ruimte-5: 20px;
    --mem-ruimte-6: 24px;
    --mem-ruimte-8: 32px;
    --mem-ruimte-10: 40px;
    --mem-ruimte-12: 48px;
    --mem-inhoud-max: 1080px;
    --mem-inhoud-smal: 460px;

    /* ---- Schaduw ---- */
    --mem-schaduw: 0 10px 30px rgba(52, 26, 140, 0.10);
    --mem-schaduw-diep: 0 18px 48px rgba(52, 26, 140, 0.16);
    --mem-schaduw-knop: 0 6px 18px rgba(108, 75, 246, 0.32);
}