/* ============================================================================
   theme.css — v116 · Huijbregts Aanbestedingsplanner
   Drie schakelbare thema's bovenop de bestaande Tailwind-tokens.
   Default (geen data-theme) = "Refined Navy" = identiek aan v115 → geen regressie.
   data-theme="warm"  = Warm Editorial
   data-theme="focus" = Focus Dark
   De palet-kleuren staan als "R G B"-triplets in CSS-variabelen; de Tailwind
   kleur-utilities worden hieronder herschreven naar rgb(var(--x) / alpha) zodat
   het wisselen van thema de hele app omkleurt.
   © 2026 Huijbregts Advies B.V.
   ============================================================================ */

:root{
  --p:        27 69 113;   /* primary  / navy        */
  --pc:       230 240 250; /* primary-container      */
  --s:        0 126 187;   /* secondary / accent     */
  --ter:      18 48 72;    /* tertiary               */
  --bg:       243 250 255; /* background / surface   */
  --sclst:    255 255 255; /* surface-container-lowest (cards) */
  --scl:      230 246 255; /* surface-container-low  */
  --sc:       216 242 255; /* surface-container      */
  --sch:      209 236 250; /* surface-container-high */
  --schst:    203 231 245; /* surface-container-highest */
  --seccon:   177 213 254; /* secondary-container    */
  --onsurf:   53 56 74;    /* on-surface             */
  --onsurfvar:66 71 79;    /* on-surface-variant     */
  --onseccon: 57 92 127;   /* on-secondary-container */
  --outline:  95 99 107;   /* outline (WCAG-veilig)  */
  --outlinevar:195 198 208;/* outline-variant        */
  --secfix:   208 228 255; /* secondary-fixed        */
  --pfixdim:  164 201 253; /* primary-fixed-dim      */
  --err:      186 26 26;   /* error                  */
  --rail: linear-gradient(180deg,#1e5080 0%,#1b4571 40%,#163960 100%);
  --rail-shadow: 4px 0 32px rgba(0,0,0,.28);
  --card-shadow: 0 1px 2px rgba(16,40,70,.05);
  --page-tint: #f3faff;
}

html[data-theme="warm"]{
  --p:        34 56 75;    /* deep ink-navy */
  --pc:       233 224 208;
  --s:        176 116 42;  /* ochre accent  */
  --ter:      44 56 64;
  --bg:       243 238 229; /* warm paper    */
  --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: 120 96 60;
  --outline:  120 109 92;
  --outlinevar:214 202 182;
  --secfix:   236 224 202;
  --pfixdim:  226 196 150;
  --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;  /* luminous blue */
  --pc:       30 50 72;
  --s:        56 189 248;  /* cyan accent   */
  --ter:      200 220 240;
  --bg:       10 20 32;    /* deep canvas   */
  --sclst:    19 33 47;    /* card panel    */
  --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;
  --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;
}

/* ── Backgrounds ─────────────────────────────────────────────────────── */
.bg-background{background-color:rgb(var(--bg))!important}
.bg-surface{background-color:rgb(var(--bg))!important}
.bg-surface\/80{background-color:rgb(var(--bg)/.82)!important}
.bg-surface-container{background-color:rgb(var(--sc))!important}
.bg-surface-container-low{background-color:rgb(var(--scl))!important}
.bg-surface-container-low\/50{background-color:rgb(var(--scl)/.5)!important}
.bg-surface-container-high{background-color:rgb(var(--sch))!important}
.bg-surface-container-highest{background-color:rgb(var(--schst))!important}
.bg-surface-container-lowest{background-color:rgb(var(--sclst))!important}
.bg-primary{background-color:rgb(var(--p))!important}
.bg-primary\/5{background-color:rgb(var(--p)/.05)!important}
.bg-primary\/10{background-color:rgb(var(--p)/.1)!important}
.bg-primary\/20{background-color:rgb(var(--p)/.2)!important}
.bg-primary\/30{background-color:rgb(var(--p)/.3)!important}
.bg-secondary{background-color:rgb(var(--s))!important}
.bg-secondary\/10{background-color:rgb(var(--s)/.1)!important}
.bg-secondary\/15{background-color:rgb(var(--s)/.15)!important}
.bg-secondary\/70{background-color:rgb(var(--s)/.7)!important}
.bg-secondary-container{background-color:rgb(var(--seccon))!important}
.bg-secondary-container\/50{background-color:rgb(var(--seccon)/.5)!important}
.bg-tertiary{background-color:rgb(var(--ter))!important}
.bg-tertiary\/10{background-color:rgb(var(--ter)/.1)!important}
.bg-tertiary\/20{background-color:rgb(var(--ter)/.2)!important}
.bg-outline\/40{background-color:rgb(var(--outline)/.4)!important}

/* ── Text ────────────────────────────────────────────────────────────── */
.text-primary{color:rgb(var(--p))!important}
.text-primary\/60{color:rgb(var(--p)/.6)!important}
.text-secondary{color:rgb(var(--s))!important}
.text-tertiary{color:rgb(var(--ter))!important}
.text-on-surface{color:rgb(var(--onsurf))!important}
.text-on-surface-variant{color:rgb(var(--onsurfvar))!important}
.text-on-secondary-container{color:rgb(var(--onseccon))!important}
.text-outline{color:rgb(var(--outline))!important}
.text-secondary-fixed{color:rgb(var(--secfix))!important}
.text-secondary-fixed\/80{color:rgb(var(--secfix)/.8)!important}
.text-primary-fixed-dim{color:rgb(var(--pfixdim))!important}
.text-error{color:rgb(var(--err))!important}

/* ── Borders ─────────────────────────────────────────────────────────── */
.border-primary{border-color:rgb(var(--p))!important}
.border-primary\/5{border-color:rgb(var(--p)/.05)!important}
.border-primary\/10{border-color:rgb(var(--p)/.1)!important}
.border-primary\/20{border-color:rgb(var(--p)/.2)!important}
.border-primary\/30{border-color:rgb(var(--p)/.3)!important}
.border-secondary\/20{border-color:rgb(var(--s)/.2)!important}
.border-surface-container-high{border-color:rgb(var(--sch))!important}
.border-surface-container-low{border-color:rgb(var(--scl))!important}
.border-outline-variant\/30{border-color:rgb(var(--outlinevar)/.3)!important}
.border-outline-variant\/40{border-color:rgb(var(--outlinevar)/.4)!important}
.border-tertiary\/20{border-color:rgb(var(--ter)/.2)!important}
.border-error\/20{border-color:rgb(var(--err)/.2)!important}

/* ── Gradients (architectural-bg, hero-overlays) ─────────────────────── */
.from-primary{--tw-gradient-from:rgb(var(--p)) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--p)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-primary\/90{--tw-gradient-from:rgb(var(--p)/.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--p)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-primary-container{--tw-gradient-to:rgb(var(--pc)) var(--tw-gradient-to-position)}

/* ── Hover / focus states ────────────────────────────────────────────── */
.hover\:bg-primary\/5:hover{background-color:rgb(var(--p)/.05)!important}
.hover\:bg-primary\/10:hover{background-color:rgb(var(--p)/.1)!important}
.hover\:bg-primary\/20:hover{background-color:rgb(var(--p)/.2)!important}
.hover\:bg-primary\/90:hover{background-color:rgb(var(--p)/.9)!important}
.hover\:bg-secondary\/25:hover{background-color:rgb(var(--s)/.25)!important}
.hover\:bg-surface-container-high:hover{background-color:rgb(var(--sch))!important}
.hover\:bg-surface-container-highest:hover{background-color:rgb(var(--schst))!important}
.hover\:bg-surface-container-low:hover{background-color:rgb(var(--scl))!important}
.hover\:bg-surface-container-low\/30:hover{background-color:rgb(var(--scl)/.3)!important}
.hover\:bg-error\/10:hover{background-color:rgb(var(--err)/.1)!important}
.hover\:text-primary:hover{color:rgb(var(--p))!important}
.hover\:text-error:hover{color:rgb(var(--err))!important}
.hover\:border-primary:hover{border-color:rgb(var(--p))!important}
.hover\:border-primary\/30:hover{border-color:rgb(var(--p)/.3)!important}
.focus\:border-primary:focus{border-color:rgb(var(--p))!important}
.group:hover .group-hover\:text-primary{color:rgb(var(--p))!important}

/* ── Smooth thema-overgang ───────────────────────────────────────────── */
body,
.bg-background,.bg-surface,.bg-surface-container,.bg-surface-container-low,
.bg-surface-container-high,.bg-surface-container-highest,.bg-surface-container-lowest,
.bg-primary,.bg-secondary{transition:background-color .35s ease,border-color .35s ease}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}