/* ==========================================================================
   Aanspeelpunt: tokens
   Eén stijl voor de hele site: licht en rustig, de video voorop, diepgroen als enige actiekleur.
   Componenten in base.css en de paginabestanden gebruiken alleen deze tokens.
   Contrast controleren: node tools/check-themes.mjs
   ========================================================================== */

/* Letters: Albert Sans, zelf gehost, zodat geen bezoeker een verzoek naar Google doet (AVG).
   Uit het npm-pakket @fontsource/albert-sans 5.3.0 (zie web/package.json), alleen wat de CSS gebruikt: de gewichten
   400, 500, 600, 700 en 800, rechtop, in de subsets latin en latin-ext. De browser haalt latin-ext alleen op als een
   pagina zulke tekens bevat. Licentie: SIL Open Font License 1.1, zie fonts/OFL.txt.
   Deze regels staan hier en niet in een eigen bestand: elke pagina en de app laden tokens.css al als eerste, dus het
   kost geen extra verzoek. De paden zijn relatief aan dit bestand en werken zo in site/ en in web/public/.
   Gebruikt de CSS een nieuw gewicht, kopieer dan de twee bestanden uit het pakket naar site/fonts en zet ze hieronder.
   De kop van elke pagina laadt 400 latin vooraf (preload in tools/build-site.mjs en de layout van de app). */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/albert-sans-latin-ext-400-normal.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: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/albert-sans-latin-400-normal.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: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/albert-sans-latin-ext-500-normal.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: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/albert-sans-latin-500-normal.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: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/albert-sans-latin-ext-600-normal.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: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/albert-sans-latin-600-normal.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: "Albert Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/albert-sans-latin-ext-700-normal.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: "Albert Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/albert-sans-latin-700-normal.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: "Albert Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/albert-sans-latin-ext-800-normal.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: "Albert Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/albert-sans-latin-800-normal.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; }

:root {
  /* Letters: overal Albert Sans */
  --font-display: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-h3: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-hand: var(--font-body);
  --display-weight: 700; --display-wdth: normal; --display-tracking: -.035em; --display-leading: 1.04; --display-scale: 1;
  --h3-weight: 700; --h3-tracking: -.02em;

  /* Grond, tekst en lijnen */
  --bg: #FFFFFF; --surface: #F3F6F2; --surface-2: #E6EDE7;
  --text: #1A2420; --heading: #0E1713; --muted: #4F5D56;
  --border: #DDE4DE; --border-hover: #B9C5BD; --border-strong: #1A2420; --link: #1E6B47;

  /* Actie: diepgroen. Accent: munt, alleen als vlak */
  --brand: #1E6B47; --brand-hover: #17573A; --on-brand: #FFFFFF;
  --accent: #DCEFE2; --on-accent: #0E1713;

  /* De rode punt van het logo. Alleen vormen, nooit tekst: de stip achter de kop, speelknoppen, opsommingstekens, de huidige pagina in de kop. */
  --dot: #E0453A;

  /* Vlakken: paginakop, voet en het blok "waarom" */
  --hero-bg: #FFFFFF; --hero-text: #1A2420; --hero-heading: #0E1713; --hero-muted: #4F5D56;
  --hero-brand: #1E6B47; --hero-brand-hover: #17573A; --hero-on-brand: #FFFFFF; --hero-chalk: #1E6B47; --hero-border: #1A2420; --hero-link: #1E6B47;
  --hero-backplate: #D3DED6;
  --inverse-bg: #10231A; --inverse-text: #FFFFFF; --inverse-muted: #C4D3CA; --inverse-border: #2C4437; --inverse-chalk: #9FD5B3; --inverse-link: #BFE6CD;

  /* Doelgroepen: een zachte tint voor vlakken en een donkere tint voor tekst op die vlakken of op wit */
  --aud-trainer: #DCEBF7; --aud-ouder: #F8E1D8; --aud-club: #DCEFE2; --aud-ambitie: #F3EACB; --aud-basis: #ECEFEA; --on-aud: #0E1713;
  --aud-trainer-ink: #1F5C99; --aud-ouder-ink: #A0402A; --aud-club-ink: #1E6B47; --aud-ambitie-ink: #7A5A00; --aud-basis-ink: #4F5D56;

  /* Modulebeeld */
  --thumb-bg: #E6EDE7; --thumb-text: #0E1713; --thumb-accent: #FFFFFF; --thumb-on-accent: #0E1713;

  /* Focus, vormen en diepte */
  --focus: #1E6B47; --hero-focus: #1E6B47; --inverse-focus: #FFFFFF;
  --radius-btn: 10px; --radius-card: 16px; --radius-block: 24px; --radius-tag: 999px;
  --card-border: 1px solid #DDE4DE; --btn-border: 1.5px;
  --hero-align: left;
  --shadow-soft: 0 1px 2px rgba(14, 23, 19, .06), 0 24px 48px -28px rgba(14, 23, 19, .38);

  /* Vast */
  --todo-bg: #FFF0CC; --todo-text: #5A3A00; --todo-border: #D9A53A;
  --danger: #B3261E; --danger-soft: #FDECEA;
  --space-section: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --wrap: min(100% - 2rem, 74rem);
  --measure: 38rem;
  --target: 44px;
}