/* ==========================================================================
   Oefenmeester — Designsysteem "Fris & speels"  (om.css)
   Eén bron van waarheid voor kleur, ruimte, vorm en componenten.
   Laadt na brand.css en hermapt de oude tokens, zodat bestaande pagina's
   de nieuwe look automatisch erven.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Merk — levendig indigo/violet */
  --om-brand:      #4F5DF5;
  --om-brand-2:    #8B5CF6;
  --om-brand-ink:  #2A34AE;
  --om-brand-soft: #EEF0FE;

  /* Speels palet — voor vakken, kaarten, badges en grafieken */
  --om-mint:  #10B981;  --om-mint-soft:  #E6F8F1;
  --om-sky:   #38BDF8;  --om-sky-soft:   #E4F5FE;
  --om-sun:   #F5A524;  --om-sun-soft:   #FEF3E2;
  --om-coral: #F2545B;  --om-coral-soft: #FEEAEB;
  --om-pink:  #EC4899;  --om-pink-soft:  #FDEAF4;
  --om-lime:  #84CC16;  --om-lime-soft:  #F1F9E3;
  --om-plum:  #A855F7;  --om-plum-soft:  #F5EBFE;

  /* Functioneel */
  --om-ok:   var(--om-mint);   --om-ok-soft:   var(--om-mint-soft);
  --om-warn: var(--om-sun);    --om-warn-soft: var(--om-sun-soft);
  --om-bad:  var(--om-coral);  --om-bad-soft:  var(--om-coral-soft);

  /* Vlakken & tekst */
  --om-bg:        #F5F7FD;
  --om-bg-2:      #EDF1FB;
  --om-surface:   #FFFFFF;
  --om-surface-2: #F7F9FE;
  --om-ink:       #16203A;
  --om-ink-2:     #566282;
  --om-ink-3:     #8A95B0;
  --om-line:      #E4E9F6;
  --om-line-2:    #D2DAEE;

  /* Vorm — rond en vriendelijk */
  --om-r-xs: 8px;
  --om-r-sm: 12px;
  --om-r:    18px;
  --om-r-lg: 24px;
  --om-r-xl: 32px;
  --om-r-pill: 999px;

  /* Schaduw — zacht, gekleurd */
  --om-sh-xs: 0 1px 2px rgba(22,32,58,.06);
  --om-sh-sm: 0 4px 14px rgba(22,32,58,.07);
  --om-sh:    0 10px 30px rgba(22,32,58,.09);
  --om-sh-lg: 0 24px 60px rgba(22,32,58,.14);
  --om-sh-brand: 0 10px 26px rgba(79,93,245,.28);

  /* Ritme */
  --om-gut: 20px;
  --om-content: 1180px;
  --om-content-wide: 1460px;

  /* Beweging */
  --om-ease: cubic-bezier(.32,.72,.34,1);
  --om-fast: 130ms;
  --om-mid:  240ms;

  /* Typografie */
  --om-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Rolaccent — de hele site verkleurt mee met wie er is ingelogd. */
html[data-user-role="leerling"]   { --om-brand:#5566F7; --om-brand-2:#9B5CF6; --om-brand-ink:#2E39B8; --om-brand-soft:#EEF0FE; }
html[data-user-role="leerkracht"] { --om-brand:#0E9AA7; --om-brand-2:#38BDF8; --om-brand-ink:#0A6E78; --om-brand-soft:#E4F6F8; }
html[data-user-role="ouder"]      { --om-brand:#10A46F; --om-brand-2:#84CC16; --om-brand-ink:#0B7350; --om-brand-soft:#E7F7F0; }
html[data-user-role="admin"]      { --om-brand:#3D4BC7; --om-brand-2:#A855F7; --om-brand-ink:#2B3690; --om-brand-soft:#EDEFFD; }

/* ── 2. Donkere modus ──────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --om-bg:        #0E1322;
  --om-bg-2:      #131A2E;
  --om-surface:   #171F33;
  --om-surface-2: #1D2740;
  --om-ink:       #E9EEFB;
  --om-ink-2:     #A6B1CC;
  --om-ink-3:     #7B87A6;
  --om-line:      #28324D;
  --om-line-2:    #35415F;
  --om-brand-soft:#1E2547;
  --om-mint-soft: #10291F; --om-sky-soft:#0D2436; --om-sun-soft:#2E2312;
  --om-coral-soft:#2E1518; --om-pink-soft:#2C1322; --om-lime-soft:#1D2810;
  --om-plum-soft: #241238;
  --om-sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --om-sh-sm: 0 4px 14px rgba(0,0,0,.34);
  --om-sh:    0 10px 30px rgba(0,0,0,.42);
  --om-sh-lg: 0 24px 60px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --om-bg:#0E1322; --om-bg-2:#131A2E; --om-surface:#171F33; --om-surface-2:#1D2740;
    --om-ink:#E9EEFB; --om-ink-2:#A6B1CC; --om-ink-3:#7B87A6;
    --om-line:#28324D; --om-line-2:#35415F; --om-brand-soft:#1E2547;
    --om-mint-soft:#10291F; --om-sky-soft:#0D2436; --om-sun-soft:#2E2312;
    --om-coral-soft:#2E1518; --om-pink-soft:#2C1322; --om-lime-soft:#1D2810;
    --om-plum-soft:#241238;
    --om-sh-xs:0 1px 2px rgba(0,0,0,.4); --om-sh-sm:0 4px 14px rgba(0,0,0,.34);
    --om-sh:0 10px 30px rgba(0,0,0,.42); --om-sh-lg:0 24px 60px rgba(0,0,0,.55);
  }
}

/* ── 3. Legacy-brug ────────────────────────────────────────────────────────
   De bestaande pagina's gebruiken --primary/--surface/--bg/--text en zetten die
   vaak in een eigen <style> ná deze stylesheet. Daarom staat hier `html:root`
   in plaats van `:root`: dat is één specificiteitspunt hoger en wint dus van
   een pagina-eigen :root-blok, ongeacht de volgorde. Zo erft elke bestaande
   pagina het nieuwe palet zonder dat de markup verandert. */
html:root {
  --primary: var(--om-brand);        --primary-dk: var(--om-brand-ink);
  --primary-sec: var(--om-brand-2);  --primary-lt: var(--om-brand-soft);
  --primary-mid: var(--om-line-2);
  --accent: var(--om-sun);           --accent-hv: #FFC05A;
  --accent-dk: #B4750C;              --accent-bg: var(--om-sun-soft);
  --bg: var(--om-bg);                --surface: var(--om-surface);
  --surf2: var(--om-surface-2);      --surf3: var(--om-bg-2);
  --text: var(--om-ink);             --text2: var(--om-ink-2);
  --text3: var(--om-ink-3);
  --border: var(--om-line);          --border2: var(--om-line-2);
  --green: var(--om-ok);   --green-bg: var(--om-ok-soft);
  --red:   var(--om-bad);  --red-bg:   var(--om-bad-soft);
  --amber: var(--om-warn); --amber-bg: var(--om-warn-soft);
  --orange: #F97316;       --orange-bg: var(--om-sun-soft);
  --yellow: var(--om-sun);
  --shadow-sm: var(--om-sh-xs); --shadow-md: var(--om-sh-sm); --shadow-lg: var(--om-sh);
  --shadow: var(--om-sh-sm);
  --r-sm: var(--om-r-xs); --r-md: var(--om-r-sm); --r-lg: var(--om-r-sm);
  --r-xl: var(--om-r);    --r-2xl: var(--om-r-lg);
  --r: var(--om-r);       --r-pill: var(--om-r-pill);
  --maxw: var(--om-content); --gut: var(--om-gut);
  --teal: var(--om-brand); --teal-dk: var(--om-brand-ink);
  --teal-bg: var(--om-brand-soft); --teal-lt: var(--om-brand-soft);
  --c-blue: var(--om-brand); --c-green: var(--om-mint); --c-purple: var(--om-plum);
  --c-pink: var(--om-pink);  --c-orange: var(--om-sun); --c-teal: #14B8A6;
  --white: var(--om-surface);
}

/* Donkere modus voor de legacy-tokens. includes/a11y.php zet hier zijn eigen
   waarden neer met dezelfde specificiteit; om.css laadt daarná en wint, zodat
   oude én nieuwe componenten in het donker hetzelfde palet gebruiken. */
html:root[data-theme="dark"] {
  --primary: #8C9BFF;        --primary-dk: #A9B4FF;
  --primary-sec: #B48CFA;    --primary-lt: var(--om-brand-soft);
  --primary-mid: var(--om-line-2);
  --accent: #F5C062;         --accent-bg: var(--om-sun-soft);  --accent-dk: #F5C062;
  --bg: var(--om-bg);        --surface: var(--om-surface);
  --surf2: var(--om-surface-2); --surf3: var(--om-bg-2);
  --text: var(--om-ink);     --text2: var(--om-ink-2);  --text3: var(--om-ink-3);
  --border: var(--om-line);  --border2: var(--om-line-2);
  --green: #34D399; --green-bg: var(--om-mint-soft);
  --red:   #FB7185; --red-bg:   var(--om-coral-soft);
  --amber: #FBBF24; --amber-bg: var(--om-sun-soft);
  --orange:#FB923C; --orange-bg:var(--om-sun-soft); --yellow: #FBBF24;
  --teal: #8C9BFF;  --teal-dk: #A9B4FF; --teal-bg: var(--om-brand-soft); --teal-lt: var(--om-brand-soft);
  --white: var(--om-surface);
}


/* Einde tokenlaag. De componenten staan in om.css, dat dit bestand nodig heeft. */