/* ===================================================================
   Blokken, Katten & Code · DESIGN TOKENS
   Eén bron van waarheid: 8pt-spacing, type-scale, kleur (light+dark),
   radius, elevatie, glas, motion. Dark = alleen variabelen wisselen.
   =================================================================== */
@import url("fonts.css");

:root{
  /* ---- fonts ---- */
  --font-display:"Baloo 2","Segoe UI",system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;

  /* ---- spacing (8pt) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  /* ---- radius ---- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;

  /* ---- type-scale ---- */
  --t-xs:12px; --t-sm:13.5px; --t-base:15.5px; --t-md:17px; --t-lg:20px;
  --t-xl:24px; --t-2xl:30px; --t-3xl:38px; --t-4xl:48px;

  /* ---- level-accenten (kern-DNA) ---- */
  --l1:#f26d5b; --l1-2:#ff9180;   /* Lego-robotica (koraal) */
  --l2:#f59e0b; --l2-2:#f7b733;   /* STEM-bouw (oranje) */
  --l3:#3f8ef0; --l3-2:#5fa8ff;   /* ICT & code (blauw) */
  --l4:#12b981; --l4-2:#38d39a;   /* mediawijsheid (groen) */
  --l5:#8b5cf6; --l5-2:#a889ff;   /* proefjes (paars) */
  --xp:#e356a7; --xp-2:#f37bc0;
  --gold:#e8a917;

  /* ---- merk / interactie (Schoolium-lavendel) ---- */
  --brand:#7c5cff; --brand-2:#9d81ff; --brand-ink:#5b3fd6;

  /* ---- light theme ---- */
  --bg:#eef1fb;
  --bg-grad-a:#f3ecff; --bg-grad-b:#eaf2ff; --bg-grad-c:#fdeef7;
  --ink:#232847; --ink-soft:#5c6488; --ink-faint:#8a92b4;
  --line:#e5e8f5;
  --surface:#ffffff;
  --surface-2:#f7f8fd;

  /* glas */
  --glass-bg:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.7);
  --glass-blur:16px;
  --tint:rgba(255,255,255,.55);      /* film achter tekst op glas → contrast */

  /* elevatie (kleur-getint, zacht) */
  --e-1:0 1px 2px rgba(60,66,120,.06), 0 2px 6px rgba(60,66,120,.05);
  --e-2:0 2px 6px rgba(60,66,120,.07), 0 10px 24px rgba(60,66,120,.08);
  --e-3:0 6px 14px rgba(60,66,120,.10), 0 22px 44px rgba(60,66,120,.12);
  --e-brand:0 10px 26px rgba(124,92,255,.28);

  /* semantisch */
  --ok:#12b981; --ok-bg:#e4f8f0;
  --warn:#e8930c; --warn-bg:#fdf0da;
  --info:#3f8ef0; --info-bg:#e7f0fe;
  --alt:#8b5cf6; --alt-bg:#efeafe;

  /* motion */
  --dur-1:120ms; --dur-2:220ms; --dur-3:340ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --rail-w:242px;      /* vastgezette breedte → main-marge (JS zet 76 bij inklappen) */
  --rail-wc:74px;      /* ingeklapte breedte */
  --topbar-h:60px;
  --maxw:1160px;
}

:root[data-theme="dark"]{
  --bg:#0f1120;
  --bg-grad-a:#1a1533; --bg-grad-b:#101a2e; --bg-grad-c:#231428;
  --ink:#eef0fb; --ink-soft:#aab2d6; --ink-faint:#7e86ac;
  --line:#262a44;
  --surface:#191d33;
  --surface-2:#151931;

  --glass-bg:rgba(30,34,60,.55);
  --glass-strong:rgba(32,37,66,.78);
  --glass-border:rgba(255,255,255,.10);
  --tint:rgba(20,22,40,.45);

  --e-1:0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.24);
  --e-2:0 2px 8px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.36);
  --e-3:0 8px 20px rgba(0,0,0,.42), 0 26px 50px rgba(0,0,0,.5);
  --e-brand:0 10px 26px rgba(124,92,255,.45);

  --ok-bg:rgba(18,185,129,.15);
  --warn-bg:rgba(232,147,12,.16);
  --info-bg:rgba(63,142,240,.16);
  --alt-bg:rgba(139,92,246,.18);
  --surface-2:#141830;
}