/* ============================================================================
   theme.css — huisstijl van de Aanbestedingsplanner, toegepast op de rekentool.
   Drie schakelbare weergaven, identiek aan de planner:
     (geen data-theme)   = Refined Navy   (standaard)
     data-theme="warm"   = Warm Editorial
     data-theme="focus"  = Focus Dark
   De kleuren staan als "R G B"-triplets, zodat elke kleur met een alfawaarde
   gebruikt kan worden: rgb(var(--p) / .1).
   ============================================================================ */

:root{
  --p:        27 69 113;   /* primair / navy             */
  --pc:       230 240 250; /* primair-vlak               */
  --s:        0 126 187;   /* secundair / accent         */
  --ter:      18 48 72;    /* tertiair                   */
  --bg:       243 250 255; /* achtergrond                */
  --sclst:    255 255 255; /* kaartvlak (lowest)         */
  --scl:      230 246 255; /* vlak laag                  */
  --sc:       216 242 255; /* vlak                       */
  --sch:      209 236 250; /* vlak hoog                  */
  --schst:    203 231 245; /* vlak hoogst                */
  --seccon:   177 213 254; /* secundair-vlak             */
  --onsurf:   53 56 74;    /* tekst op vlak              */
  --onsurfvar:66 71 79;    /* zachte tekst               */
  --onseccon: 31 68 104;   /* tekst op secundair-vlak (AAA) */
  --outline:  95 99 107;   /* rand (WCAG-veilig)         */
  --outlinevar:195 198 208;/* zachte rand                */
  --secfix:   208 228 255; /* secundair-vast             */
  --pfixdim:  164 201 253; /* primair-vast-gedempt       */
  --err:      163 22 20;   /* fout (AAA op wit)          */
  --warn:     150 68 6;    /* waarschuwing (AAA op wit)  */
  --ok:       17 106 50;   /* bevestiging (AAA op wit)   */
  --err-vlak: 254 242 242;
  --warn-vlak:255 251 235;
  --ok-vlak:  240 253 244;
  --rail: linear-gradient(180deg,#1e5080 0%,#1b4571 40%,#163960 100%);
  --rail-shadow: 4px 0 32px rgba(0,0,0,.28);
  --rail-fg: 255 255 255;      /* tekst op het zijpaneel: altijd dekkend */
  --rail-fg-zacht: 242 246 251;/* secundaire tekst op het zijpaneel      */
  --card-shadow: 0 1px 2px rgba(16,40,70,.05);
  --page-tint: #f3faff;
  --kop: var(--p);            /* kleur van koppen en accenttekst   */
  --knop-p: var(--p);         /* vulling van de primaire knop      */
  --knop-p-tekst: 255 255 255;/* tekst op de primaire knop         */
  --ok-tekst: 255 255 255;    /* tekst op een groen vlak           */
  --radius: 10px;
  --font-tekst: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-kop: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

html[data-theme="warm"]{
  --p:        34 56 75;
  --pc:       233 224 208;
  --s:        176 116 42;
  --ter:      44 56 64;
  --bg:       243 238 229;
  --sclst:    255 253 248;
  --scl:      247 241 232;
  --sc:       240 233 221;
  --sch:      233 224 208;
  --schst:    228 218 200;
  --seccon:   233 220 197;
  --onsurf:   44 39 32;
  --onsurfvar:90 81 66;
  --onseccon: 92 71 38;
  --outline:  120 109 92;
  --outlinevar:214 202 182;
  --secfix:   236 224 202;
  --pfixdim:  226 196 150;
  --err-vlak: 252 239 235;
  --warn-vlak:250 243 228;
  --ok-vlak:  237 245 234;
  --rail: linear-gradient(180deg,#2b3c49 0%,#22323e 50%,#1a2832 100%);
  --card-shadow: 0 1px 2px rgba(60,48,30,.06),0 10px 26px rgba(60,48,30,.05);
  --page-tint: #f3eee5;
}

html[data-theme="focus"]{
  --p:        47 125 209;
  --pc:       30 50 72;
  --s:        56 189 248;
  --ter:      200 220 240;
  --bg:       10 20 32;
  --sclst:    19 33 47;
  --scl:      15 28 40;
  --sc:       17 31 44;
  --sch:      33 52 74;
  --schst:    40 60 82;
  --seccon:   28 52 76;
  --onsurf:   232 241 251;
  --onsurfvar:144 166 189;
  --onseccon: 180 205 230;
  --outline:  120 144 168;
  --outlinevar:42 62 84;
  --secfix:   156 212 255;
  --pfixdim:  156 212 255;
  --err:      248 113 113;
  --warn:     252 211 77;
  --ok:       74 222 128;
  --err-vlak: 47 27 32;
  --warn-vlak:44 38 22;
  --ok-vlak:  20 42 32;
  --rail: linear-gradient(180deg,#0d1a28 0%,#0a1422 100%);
  --card-shadow: 0 1px 2px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.45);
  --page-tint: #0a1420;
  /* Kleurregel voor de donkere weergave:
     - geen verzadigd blauw als tekstkleur op een donkere ondergrond;
     - geen donkere tekst op een blauw vlak.
     Koppen en accenttekst zijn daarom (bijna) wit; hiërarchie komt uit grootte en
     gewicht. Knoppen gebruiken een blauw dat donker genoeg is voor witte tekst. */
  --kop: 232 241 251;
  --knop-p: 29 95 165;
  --knop-p-tekst: 255 255 255;
  --onseccon: 214 229 243;
  --ok-tekst: 10 20 32;       /* groen is hier licht: donkere tekst erop */
}

/* Zachte overgang bij het wisselen van weergave. */
body, .kaart, .card, table.grid, .tile, .notice, #sidebar, #topbar{
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; } }