/* ==========================================================================
   Study Hub — design tokens

   Kleur draagt hier betekenis, en elke kleur heeft precies één betekenis:

     rood      alleen fout
     groen     alleen goed
     cyaan     selectie en focus — "dit heb jij aangeklikt"
     amber     de actieknop en je voortgang — "hier klik je verder"
     violet    geheugensterkte
     oranje    waarschuwing

   Selectie was eerder amber-rood en dat botste met de betekenis van rood.
   Bovendien staat er nu overal een icoon of tekst naast de kleur, zodat
   goed/fout ook zonder kleur te zien is (rood-groen-blindheid komt bij
   ongeveer een op de twaalf mannen voor).
   ========================================================================== */

:root {
  /* --- basis ------------------------------------------------------------ */
  --bg:         #0a111d;
  --bg-deep:    #060c15;
  --surface:    #121d2f;
  --surface-2:  #1a2740;
  --surface-3:  #22344f;
  --line:       #2a3a54;
  --line-soft:  #1f2d43;

  --text:       #e8eef8;
  --text-dim:   #b6c6dc;
  --muted:      #8a9db8;

  /* --- semantische rollen ----------------------------------------------- */
  --select:      #38bdf8;   /* geselecteerd / actief */
  --select-tint: rgba(56, 189, 248, .16);
  --focus:       #7dd3fc;   /* toetsenbordfocus */

  --action:      #ffb020;   /* primaire knop, XP, voortgang */
  --action-ink:  #2a1a02;
  --action-tint: rgba(255, 176, 32, .15);

  --memory:      #a78bfa;   /* geheugensterkte, beheersing */
  --memory-tint: rgba(167, 139, 250, .16);

  --ok:          #34d399;
  --ok-tint:     rgba(52, 211, 153, .15);
  --no:          #f87171;
  --no-tint:     rgba(248, 113, 113, .15);
  --warn:        #f59e0b;

  /* --- zeldzaamheid van medailles ---------------------------------------- */
  --r-brons:      #cd8b5a;
  --r-zilver:     #cbd7e6;
  --r-goud:       #f5c451;
  --r-iridescent: #7ff5d6;
  --iridescent: linear-gradient(115deg, #7ff5d6, #64b5ff 35%, #c084fc 65%, #ffb020);

  /* --- aliassen voor oudere regels --------------------------------------- */
  --ink: var(--bg);
  --signal: var(--action);
  --signal-ink: var(--action-ink);
  --data: var(--select);
  --mastery: var(--memory);

  /* --- typografie -------------------------------------------------------- */
  --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.3125rem;
  --step-3:  1.75rem;
  --step-4:  clamp(2rem, 4.5vw, 3.25rem);
  --step-5:  clamp(2.5rem, 6vw, 4.25rem);

  /* --- ruimte en vorm ---------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;

  --shadow-1: 0 1px 2px rgba(3, 8, 15, .5);
  --shadow-2: 0 12px 34px -14px rgba(2, 6, 12, .85);
  --shadow-3: 0 28px 70px -28px rgba(2, 6, 12, .95);
  --glow-action: 0 0 0 1px rgba(255, 176, 32, .35), 0 10px 30px -12px rgba(255, 176, 32, .45);
  --glow-select: 0 0 0 1px rgba(56, 189, 248, .4), 0 10px 30px -14px rgba(56, 189, 248, .5);

  /* --- glas en textuur ---------------------------------------------------- */
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-edge: rgba(255, 255, 255, .07);
  --grain-opacity: .035;

  /* --- beweging ----------------------------------------------------------- */
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  380ms;
  --dur-story: 900ms;
  --ease-out:  cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.6, .05, .3, .95);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --motion-scale: 1;
}

/* Lichte variant — dezelfde rollen, andere waarden. */
[data-theme="daylight"] {
  --bg:         #eef2f8;
  --bg-deep:    #e2e8f1;
  --surface:    #ffffff;
  --surface-2:  #f4f7fc;
  --surface-3:  #e8eef7;
  --line:       #d3dde9;
  --line-soft:  #e3eaf3;

  --text:       #0f1e2e;
  --text-dim:   #35506b;
  --muted:      #5d7391;

  --select:      #0b7ea4;
  --select-tint: rgba(11, 126, 164, .12);
  --focus:       #0b7ea4;
  --action:      #b4620a;
  --action-ink:  #fff6e9;
  --action-tint: rgba(180, 98, 10, .12);
  --memory:      #5b46c8;
  --memory-tint: rgba(91, 70, 200, .12);
  --ok:          #0f7a55;
  --ok-tint:     rgba(15, 122, 85, .12);
  --no:          #b32d35;
  --no-tint:     rgba(179, 45, 53, .12);

  --glass: color-mix(in srgb, #ffffff 78%, transparent);
  --glass-edge: rgba(15, 30, 46, .06);
  --grain-opacity: .02;

  --shadow-2: 0 12px 30px -16px rgba(15, 35, 60, .3);
  --shadow-3: 0 26px 56px -26px rgba(15, 35, 60, .38);
}

/* Bewegingsniveau: instelbaar en automatisch volgens je besturingssysteem. */
[data-motion="subtle"] { --motion-scale: .45; --dur-story: 400ms; }
[data-motion="off"]    { --motion-scale: 0; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
}

[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}