/* ELIMA website: ontwerptokens. Kleuren komen uit de app (frontend/src/styles/app.css), op verzoek van Ryan.
   Goud is een accent voor wat nu telt of de hoofdactie, niet voor elk kader. Buiten de vijf funderingen
   geen paars, blauw, oranje of zand. */
:root {
  color-scheme: dark;

  /* Letters: Libre Baskerville 400 en 700 voor koppen, Inter voor tekst en cijfers. */
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Letterschaal (21 oktober, KWALITEITSLAT.md 5 en _research/KOPPEN-INVENTARIS-1021.md): één bron voor de hele site.
     Elke kop leest zijn maat, regelafstand en letterafstand van zijn rol. Computer / telefoon:
     H1 66/44 · H2 52/36 · stap- en kolomkop 40/28 · kaarttitel 26/22 · onderdeel 20/18 · label 13/12 · lede en tekst 17/16.
     Telefoon tot 820 breed. Alleen H1 loopt tussen 821 en 1435 breed mee met de breedte (4,6vw, vanaf 1435 de volle 66), zodat de kop van een
     opening met beeld op een tablet niet over het beeld loopt; de andere rollen hebben vanaf 821 hun computermaat. */
  --fs-h1: clamp(44px, 4.6vw, 66px);
  --fs-h2: clamp(36px, 4vw, 52px); /* 15 nov: loopt vanaf 821 vloeiend mee (36 tot 52, vol vanaf 1300), zodat koppen op een tablet niet boven de opening uitkomen */
  --fs-stap: 40px;
  --fs-kaart: 26px;
  --fs-item: 20px;
  --fs-label: 13px;
  --fs-lede: 17px;
  --lh-h1: 1.05;
  --lh-h2: 1.06;
  --lh-stap: 1.1;
  --lh-kaart: 1.2;
  --lh-item: 1.3;
  --lh-label: 1.4;
  --lh-lede: 1.5;
  --ls-h1: -0.01em;
  --ls-h2: -0.015em;
  --ls-stap: -0.01em;
  --ls-label: 0.1em;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --btn-h: 44px;
  --btn-h-sm: 38px;

  /* Ritme: sectiepadding boven en onder (tussen de inhoud van twee secties 2 x 88 = 176), label tot kop, kop tot lede,
     kop of lede tot de inhoud eronder. Telefoon: 72 en 32. */
  --sec: 88px;
  --ruimte-label: 16px;
  --ruimte-lede: 16px;
  --ruimte-inhoud: 40px;
  --gutter: 16px;
  --content: 1120px;

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (max-width: 820px) {
  :root { --fs-h1: 44px; --fs-h2: 36px; --fs-stap: 28px; --fs-kaart: 22px; --fs-item: 18px; --fs-label: 12px; --fs-lede: 16px; --sec: 72px; --ruimte-inhoud: 32px; }
}

/* KLEUREN. Donker is de standaard, ook als het toestel op licht staat (geen prefers-color-scheme). Dezelfde waarden gelden binnen
   de vlakken die in de lichte modus donker blijven omdat er een foto of een appscherm in zit (de lijst achter :is). Zo blijft de
   tekst op een foto licht en de schaduw eronder donker, zonder dat elk onderdeel een eigen lichte regel nodig heeft. */
:root,
:root[data-theme="light"] :is(.card, .panel .visual, .slot, .doors2 a, .stepcards .pic, .seg .media, .gk-ui, .md) {
  color-scheme: dark;

  /* Groen, van diep naar verhoogd */
  --bg: #011400;
  --brand: #022600;
  --panel: #072207;
  --panel-hi: #0d2d0d;
  --lift: #0a2a0a;

  /* Contrast van de segmenten (13 oktober): twee knoppen, voor alle pagina's tegelijk.
     1. De toon van de eilanden en de kaarten erop: --panel en --panel-hi hierboven (nu #072207 en #0d2d0d;
        variant lichter: #0c2b0c en #143814).
     2. Een fijne lijn om elk donker eiland: --island-line (12%).
     Besluit van de admin na meting bij Linear, Fountain Life, Oura en Eight Sleep (zie ANTWOORDEN-RYAN.md): de tonen blijven de
     huiskleuren, de scheiding komt van deze lijn, en goud (1 px, vol) staat alleen op wat wordt uitgelicht. */
  --island-line: rgba(236, 234, 228, 0.12);
  --ink: #010f00;

  /* Gebroken wit en lijnen */
  --off: #eceae4;
  --off-dim: #d9d6cc;
  --muted: rgba(236, 234, 228, 0.66);
  --faint: rgba(236, 234, 228, 0.46);
  --line: rgba(236, 234, 228, 0.1);
  --line-2: rgba(236, 234, 228, 0.15);

  /* Goud */
  --gold: #ddaa6a;
  --gold-hi: #e8c894;
  --gold-soft: #f0ddbe;
  --gold-tint: rgba(221, 170, 106, 0.13);
  --gold-line: rgba(221, 170, 106, 0.5);
  --on-gold: #1c2a14;
  --gold-btn: #ddaa6a;       /* vulling van de hoofdknop: in elke modus hetzelfde goud */
  --gold-btn-hi: #e8c894;
  --gold-ink: #7a5a2c;       /* label op een licht vlak (donker goud op crème) */
  --focus: var(--gold);      /* ring van het toetsenbord */
  --gold-ink-2: #9a7444;     /* label en icoon op de app-band */
  --sel-fg: #011400;         /* tekst op een gekozen gouden pil */
  --edge-hi: rgba(221, 170, 106, 0.5);  /* de ene dunne gouden lijn: wat nu aan de beurt is */

  /* Accenten in tekst (in de lichte modus geen goud: label grijsgroen, getal en nadruk diepgroen) */
  --accent-label: var(--gold);
  --accent-text: var(--gold);
  --accent-hover: var(--gold-hi);
  --accent-soft: var(--gold-soft);
  --accent-ink: var(--gold-ink);   /* nadruk op een licht vlak */
  --accent-line: var(--gold);
  --check-bg: #ddaa6a;
  --check-fg: #011400;
  --badge-bg: #ddaa6a;
  --badge-fg: #011400;

  /* Licht vlak (de crèmedelen die de site van nu afwisselt met donker) */
  --light-bg: #eceae4;
  --light-bg-2: #e4e1d8;
  --light-ink: #011400;
  --light-muted: rgba(1, 20, 0, 0.66);
  --light-line: rgba(1, 20, 0, 0.12);

  /* De vijf funderingen houden hun eigen kleur */
  --f-stressbalans: #b9a2cf;
  --f-voeding: #a6c78f;
  --f-slaap: #ddaa6a;
  --f-beweging: #e39a7c;
  --f-connectie: #94b8d8;

  /* Kanalen, voor doorzichtige varianten: rgb(var(--off-rgb) / .6). In de lichte modus wisselen ze mee. */
  --bg-rgb: 1 20 0;          /* vlakken die de paginakleur dragen: balk, verlopen naar de achtergrond */
  --ink-rgb: 1 20 0;         /* schaduwen, overlays en lijnen op een licht vlak */
  --off-rgb: 236 234 228;    /* tekst en haarlijnen */
  --gold-rgb: 221 170 106;
  --shadow-rgb: 0 0 0;
  --glass-rgb: 7 34 7;       /* glas */
  --glass-plus: 0;           /* hoeveel dekking het glas er in deze modus bij krijgt */
  --gold-edge-rgb: 221 170 106;  /* gouden randjes: in licht neutraal */
  --gold-ink-rgb: 122 90 44;
  --sh: 1;                   /* schaduwsterkte */
  --glow: 1;                 /* gouden gloed achter schermen en actieve punten */
  --white-plus: 0;           /* witte kaarten op een band: in licht bijna dicht */
  --edge: 1;                 /* sterkte van de randjes die in donker goud zijn */
}

/* LICHT (22 oktober 2026): palet A v2 uit de app, op verzoek van Ryan. Goud alleen voor ringen, voortgang, een lijn in een
   grafiek, de kroon en de hoofdknop, plus een dunne lijn om wat nu aan de beurt is. Geen gouden tekst, labels of randen.
   Kaarten wit zonder rand, tweede tekst grijsgroen. Contrast (gemeten): tekst op wit 16,6 : 1, --muted 5,7 : 1 (5,0 op de pagina,
   4,6 op de band), --faint 5,4 : 1 (4,8 op de pagina), knoptekst op de gouden knop 7,2 : 1. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f1ed;
  --brand: #e9e8e2;
  --panel: #ffffff;
  --panel-hi: #f4f3ef;
  --lift: #f8f7f4;
  --island-line: transparent;
  --ink: #15211a;

  --off: #15211a;
  --off-dim: #2c3830;
  --muted: #5c6a60;
  --faint: #616d65;
  --line: rgba(15, 39, 18, 0.07);
  --line-2: rgba(15, 39, 18, 0.11);

  --gold: #b07a36;           /* ringen, voortgang, lijn in een grafiek, kroon */
  --gold-hi: #c68c3f;
  --gold-soft: #d6a35a;
  --gold-tint: rgba(15, 39, 18, 0.06);   /* neutraal grijs, geen goud */
  --gold-line: rgba(15, 39, 18, 0.28);   /* onderlijn van een link, rand van een pijlknop */
  --on-gold: #1c2a14;
  --gold-btn: #ddaa6a;
  --gold-btn-hi: #d49f58;
  --gold-ink: #5c6a60;
  --gold-ink-2: #5c6a60;
  --edge-hi: rgba(176, 122, 54, 0.55);
  --focus: #1f5a26;
  --sel-fg: #1c2a14;

  --accent-label: #616d65;
  --accent-text: #1f5a26;
  --accent-hover: #1f5a26;
  --accent-soft: #1f5a26;
  --accent-ink: #1f5a26;
  --accent-line: rgba(15, 39, 18, 0.4);
  --check-bg: #2a6e2f;
  --check-fg: #ffffff;
  --badge-bg: rgba(15, 39, 18, 0.06);
  --badge-fg: #2c3830;

  --light-bg: #e9e8e2;       /* de crèmebanden: een rustig tweede vlak naast de pagina */
  --light-bg-2: #e1e0d9;
  --light-ink: #15211a;
  --light-muted: #5c6a60;
  --light-line: rgba(15, 39, 18, 0.12);

  --f-stressbalans: #7d62a0;
  --f-voeding: #5a8743;
  --f-slaap: #b07a36;
  --f-beweging: #b0603e;
  --f-connectie: #4b7ba6;

  --bg-rgb: 242 241 237;
  --ink-rgb: 15 39 18;
  --off-rgb: 21 33 26;
  --gold-rgb: 176 122 54;
  --shadow-rgb: 15 39 18;
  --glass-rgb: 255 255 255;
  --glass-plus: 0.1;
  --gold-edge-rgb: 15 39 18;
  --gold-ink-rgb: 92 106 96;
  --sh: 0.38;
  --glow: 0.45;
  --white-plus: 0.4;
  --edge: 0.45;
}