/* Gegenereerd door tools/export_welkom.py — niet met de hand bewerken.
 * De tokens van de app (style.css :root + theme.css licht), gedeeld met
 * de publieke voordeur. Bewerk style.css/theme.css en draai de export. */
:root {
  /* Het donkere handelspalet (2.5): zwart als basis, groen en rood als betekenis,
     goud als accent, zilver voor het secundaire. Diepte komt van vlakken, niet van
     randen — vandaar de subtielere lijnkleur.

     Twee kleuren die op elkaar gingen lijken en dat niet mogen: goud (--accent,
     versiering en nadruk) en amber (--warn, een waarschuwing). Een waarschuwing die
     eruitziet als een sieraad wordt niet gelezen. --amber blijft bestaan als alias
     van --warn zodat oude regels blijven werken, maar decoratie hoort --accent te
     gebruiken. */
  --bg: #07090c;
  --surface: #0d1014;
  --surface-2: #12151b;
  --surface-3: #181c24;
  --line: #1e232c;
  --text: #e8ecf3;
  --muted: #8b95a7;
  --zilver: #9aa3b2;
  --accent: #d4a537;
  --accent-dim: rgba(212,165,55,.10);
  --green: #2ebd85;
  --red: #f6465d;
  --warn: #ff9f1a;
  --amber: var(--warn);
  --radius: 12px;
  --radius-sm: 9px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 2.44 — de doorzichtige tinten als tokens: één plek, geen losse rgba's meer. */
  --accent-a10: rgba(212,165,55,.10);
  --accent-a35: rgba(212,165,55,.35);
  --green-a08: rgba(46,189,133,.08);
  --green-a10: rgba(46,189,133,.10);
  --green-a14: rgba(46,189,133,.14);
  --green-a16: rgba(46,189,133,.16);
  --green-a18: rgba(46,189,133,.18);
  --green-a35: rgba(46,189,133,.35);
  --green-a45: rgba(46,189,133,.45);
  --green-a50: rgba(46,189,133,.5);
  --red-a08: rgba(246,70,93,.08);
  --red-a10: rgba(246,70,93,.10);
  --red-a14: rgba(246,70,93,.14);
  --red-a16: rgba(246,70,93,.16);
  --red-a18: rgba(246,70,93,.18);
  --red-a35: rgba(246,70,93,.35);
  --red-a45: rgba(246,70,93,.45);
  --red-a50: rgba(246,70,93,.5);
  --zilver-a14: rgba(154,163,178,.14);
  --zilver-a50: rgba(154,163,178,.5);
  --zwart-a50: rgba(0,0,0,.5);
  /* Eén schaduw voor alles wat "boven de pagina zweeft" (menu's, dialogen) en één
     hele lichte voor kaarten. Twee waarden in plaats van twintig losse regels
     houdt de diepte consistent — daar zit het verschil tussen verzorgd en rommelig. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 12px 34px rgba(0,0,0,.45);
}

html[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e3e7ed;
  --line: #dfe3ea;
  --text: #16202e;
  --muted: #64748b;
  --accent-dim: rgba(184, 134, 11, .12);
  /* Goud op wit is onleesbaar; op licht wordt het accent een donker goud. */
  --accent: #9a7112;
  --zilver: #64748b;
  --warn: #b45309;
  --green: #16a34a;
  --red: #dc2626;
  --amber: var(--warn);
  /* Dezelfde twee diepteniveaus als in het donkere thema, maar met de zachtheid die
     bij een lichte achtergrond hoort. Een schaduw van 45% zwart op wit ziet eruit
     als vuil. */
  --shadow-1: 0 1px 2px rgba(16, 32, 46, .07);
  --shadow-2: 0 12px 34px rgba(16, 32, 46, .14);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e3e7ed;
  --line: #dfe3ea;
  --text: #16202e;
  --muted: #64748b;
  --accent-dim: rgba(184, 134, 11, .12);
  /* Goud op wit is onleesbaar; op licht wordt het accent een donker goud. */
  --accent: #9a7112;
  --zilver: #64748b;
  --warn: #b45309;
  --green: #16a34a;
  --red: #dc2626;
  --amber: var(--warn);
  /* Dezelfde twee diepteniveaus als in het donkere thema, maar met de zachtheid die
     bij een lichte achtergrond hoort. Een schaduw van 45% zwart op wit ziet eruit
     als vuil. */
  --shadow-1: 0 1px 2px rgba(16, 32, 46, .07);
  --shadow-2: 0 12px 34px rgba(16, 32, 46, .14);
  }
}