/* LOVD OS — designtokens. Licht is de standaard.
   Opzet in de geest van Linear: een warm-neutrale schil, strakke radii,
   Inter voor de interface en JetBrains Mono voor cijfers. Het accent is
   bewust LOVD-rosso en niet het indigo van Linear, zodat de app als een
   professioneel gereedschap voelt maar wel van LOVD blijft.

   Licht is de standaard voor LOVD. Donker staat onder [data-theme="dark"]
   en wordt met de schakelaar onderin de zijbalk gezet; de keuze blijft
   bewaard tussen bezoeken. */
[data-theme="dark"] {
  /* Vlakken, van diep naar verheven */
  --sunken: #090807;
  --canvas: #0E0C0B;
  --paper: #141210;        /* kaarten */
  --paper-2: #1C1917;      /* verhoogd vlak, invoervelden */
  --hover: #201D1B;
  --selected: #26221F;

  /* Lijnen */
  --line-soft: #22201E;
  --line: #2F2C2A;
  --line-strong: #44403D;

  /* Tekst, vier niveaus */
  --ink: #F0EEEC;
  --mid: #A7A4A1;
  --faint: #777471;
  --ghost: #55524F;

  /* Accent: LOVD-rosso, opgehelderd zodat het op donker leesbaar blijft */
  --rosso: #E04667;
  --rosso-deep: #D1375C;
  --rosso-soft: #4B1D24;
  --rosso-text: #FF8AA0;
  --rosso-glow: rgba(224, 70, 103, 0.28);

  /* Betekenis */
  --groen: #51B67A;
  --groen-licht: #6BC98F;
  --groen-bg: #14301F;
  --amber: #E8B048;
  --amber-bg: #33260E;
  --rood: #DD5652;
  --rood-bg: #3A1B19;
  --blauw: #7E93E8;
  --blauw-bg: #1E2440;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.62);
  --thumb: #35312E;
  --thumb-hover: #44403D;
}

:root,
[data-theme="light"] {
  --sunken: #F2F0EE;
  --canvas: #F9F7F6;
  --paper: #FFFFFF;
  --paper-2: #FBFAF9;
  --hover: #F3F0EE;
  --selected: #EDE9E6;

  --line-soft: #E5E2E0;
  --line: #D5D2CF;
  --line-strong: #A8A3A0;

  --ink: #1D1A18;
  --mid: #56524F;
  --faint: #7D7977;
  --ghost: #9B9895;

  --rosso: #D91B4B;
  --rosso-deep: #B0143C;
  --rosso-soft: #FCE9EE;
  --rosso-text: #B0143C;
  --rosso-glow: rgba(217, 27, 75, 0.2);

  --groen: #00884B;
  --groen-licht: #00A15A;
  --groen-bg: #E6F4EC;
  --amber: #BB7400;
  --amber-bg: #FBF1E0;
  --rood: #C92F33;
  --rood-bg: #FBEAEA;
  --blauw: #3A5BC7;
  --blauw-bg: #EAEEFB;

  --shadow: 0 1px 2px rgba(29, 26, 24, 0.05);
  --shadow-lift: 0 4px 16px rgba(29, 26, 24, 0.09), 0 1px 2px rgba(29, 26, 24, 0.05);
  --scrim: rgba(29, 26, 24, 0.34);
  --thumb: #D5D2CF;
  --thumb-hover: #A8A3A0;
}

:root {
  --display: 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Strakker dan voorheen: dit is wat een app van een brochure onderscheidt */
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --r-xs: 4px;

  --sidebar-w: 224px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typografieschaal: vier maten, meer heeft een app niet nodig.
     micro voor groepskopjes, caption voor bijschriften, body voor alles,
     emphasis voor wat eruit moet springen. */
  --t-micro: 10px;
  --t-caption: 11px;
  --t-body: 13px;
  --t-emphasis: 13px;
  --row-h: 28px;
}