/* butlr huisstijl (SCRUM-100). Gegenereerd uit het naslagwerk (tokens.json en bundle.css), daarna
   met de hand onderhouden; technische namen blijven Atom. Thema's: licht is de basis, donker
   volgt het systeem (:root zonder data-theme) of wordt gekozen met data-theme="donker".
   Het standaardthema staat in thema.js (één instelling). Alleen tokens gebruiken, geen losse kleurwaarden. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/newsreader-latin.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url("/fonts/newsreader-latin-italic.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/fonts/dm-sans-latin.woff2") format("woff2")}

:root{color-scheme:light;
  --ruimte-1:4px;
  --ruimte-2:8px;
  --ruimte-3:12px;
  --ruimte-4:16px;
  --ruimte-5:20px;
  --ruimte-6:24px;
  --ruimte-8:32px;
  --ruimte-12:48px;
  --hoek-s:6px;
  --hoek-m:9px;
  --hoek-l:12px;
  --hoek-xl:16px;
  --hoek-rond:999px;
  --font-kop:"Newsreader", Georgia, "Times New Roman", serif;
  --font-tekst:"DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --grond:#F8F4EE;
  --vlak:#FFFFFF;
  --vlak-2:#F0EBE1;
  --lijn:#E3DDD2;
  --lijn-2:#CFC7B9;
  --rand-veld:#7F8C83;
  --inkt:#1A3320;
  --inkt-2:#4F5F55;
  --teal:#025757;
  --teal-hover:#014545;
  --op-teal:#FFFFFF;
  --teal-zacht:#E1EEEC;
  --teal-licht:#519B9C;
  --oranje:#CA7239;
  --oranje-tekst:#9A4F22;
  --oranje-zacht:#F7E7DA;
  --zand:#DCC18C;
  --winst:#2A7046;
  --winst-zacht:#E6F2EA;
  --verlies:#B42318;
  --verlies-zacht:#FBE9E7;
  --donker-vlak:#1A3320;
  --op-donker:#F8F4EE;
  --schaduw-kaart:0 1px 2px rgba(26,51,32,0.05), 0 6px 20px rgba(26,51,32,0.06);
  --focus:var(--oranje);
  --link:var(--teal);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme]){color-scheme:dark;
  --grond:#0F1C14;
  --vlak:#15261B;
  --vlak-2:#1B3022;
  --lijn:#284033;
  --lijn-2:#36513F;
  --rand-veld:#6C8273;
  --inkt:#EEE9E0;
  --inkt-2:#A9B5AC;
  --teal:#5DB5B2;
  --teal-hover:#7CC6C3;
  --op-teal:#0F1C14;
  --teal-zacht:#183A33;
  --teal-licht:#3E8E8C;
  --oranje:#E0905A;
  --oranje-tekst:#E39A66;
  --oranje-zacht:#3A2618;
  --zand:#C9AE7A;
  --winst:#6CC08A;
  --winst-zacht:#1A3A26;
  --verlies:#F07A6B;
  --verlies-zacht:#3D1D19;
  --donker-vlak:#08120C;
  --op-donker:#EEE9E0;
  --schaduw-kaart:0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.25);
}
}
:root[data-theme="donker"]{color-scheme:dark;
  --grond:#0F1C14;
  --vlak:#15261B;
  --vlak-2:#1B3022;
  --lijn:#284033;
  --lijn-2:#36513F;
  --rand-veld:#6C8273;
  --inkt:#EEE9E0;
  --inkt-2:#A9B5AC;
  --teal:#5DB5B2;
  --teal-hover:#7CC6C3;
  --op-teal:#0F1C14;
  --teal-zacht:#183A33;
  --teal-licht:#3E8E8C;
  --oranje:#E0905A;
  --oranje-tekst:#E39A66;
  --oranje-zacht:#3A2618;
  --zand:#C9AE7A;
  --winst:#6CC08A;
  --winst-zacht:#1A3A26;
  --verlies:#F07A6B;
  --verlies-zacht:#3D1D19;
  --donker-vlak:#08120C;
  --op-donker:#EEE9E0;
  --schaduw-kaart:0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.25);
}
:root[data-theme="licht"]{color-scheme:light;
  --grond:#F8F4EE;
  --vlak:#FFFFFF;
  --vlak-2:#F0EBE1;
  --lijn:#E3DDD2;
  --lijn-2:#CFC7B9;
  --rand-veld:#7F8C83;
  --inkt:#1A3320;
  --inkt-2:#4F5F55;
  --teal:#025757;
  --teal-hover:#014545;
  --op-teal:#FFFFFF;
  --teal-zacht:#E1EEEC;
  --teal-licht:#519B9C;
  --oranje:#CA7239;
  --oranje-tekst:#9A4F22;
  --oranje-zacht:#F7E7DA;
  --zand:#DCC18C;
  --winst:#2A7046;
  --winst-zacht:#E6F2EA;
  --verlies:#B42318;
  --verlies-zacht:#FBE9E7;
  --donker-vlak:#1A3320;
  --op-donker:#F8F4EE;
  --schaduw-kaart:0 1px 2px rgba(26,51,32,0.05), 0 6px 20px rgba(26,51,32,0.06);
}

/* Atom huisstijl — onderdelen. Alle kleuren, ruimtes en hoeken komen uit tokens.css. */
.at{font-family:var(--font-tekst);color:var(--inkt);background:var(--grond);font-size:14px;line-height:1.5}
.at-rij{display:flex;flex-wrap:wrap;gap:var(--ruimte-2);align-items:center}
.at-stapel{display:grid;gap:var(--ruimte-3)}

/* Knop */
.at-knop{font:inherit;font-size:14px;font-weight:600;line-height:20px;padding:8px 15px;border-radius:var(--hoek-m);border:1px solid var(--teal);background:var(--teal);color:var(--op-teal);cursor:pointer}
.at-knop:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.at-knop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.at-knop:disabled{opacity:.45;cursor:not-allowed}
.at-knop--secundair{background:transparent;color:var(--teal)}
.at-knop--secundair:hover{background:var(--teal-zacht);border-color:var(--teal)}
.at-knop--tekst{background:transparent;border-color:transparent;color:var(--teal);padding-inline:6px}
.at-knop--tekst:hover{background:var(--teal-zacht);border-color:transparent}
.at-knop--verwijderen{background:transparent;border-color:var(--lijn-2);color:var(--verlies)}
.at-knop--verwijderen:hover{background:var(--verlies-zacht);border-color:var(--verlies)}

/* Invoerveld */
.at-veld{display:grid;gap:5px;font-size:13px;font-weight:500;color:var(--inkt-2)}
.at-veld input,.at-veld select,.at-veld textarea{font:inherit;font-size:14px;font-weight:400;color:var(--inkt);background:var(--vlak);border:1px solid var(--rand-veld);border-radius:var(--hoek-m);padding:8px 11px;min-width:0}
.at-veld input:focus,.at-veld select:focus,.at-veld textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal)}
.at-veld .at-hulp{font-size:12px;font-weight:400;color:var(--inkt-2)}
.at-veld--fout input{border-color:var(--verlies)}
.at-veld--fout .at-hulp{color:var(--verlies)}
.at-vinkje{display:flex;gap:var(--ruimte-2);align-items:center;font-size:14px;color:var(--inkt)}
.at-vinkje input{width:16px;height:16px;accent-color:var(--teal)}

/* Statuslabel */
.at-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:18px;padding:2px 10px;border-radius:var(--hoek-rond);white-space:nowrap}
.at-label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.at-label--teal{background:var(--teal-zacht);color:var(--teal)}
.at-label--letop{background:var(--oranje-zacht);color:var(--oranje-tekst)}
.at-label--winst{background:var(--winst-zacht);color:var(--winst)}
.at-label--verlies{background:var(--verlies-zacht);color:var(--verlies)}
.at-label--neutraal{background:var(--vlak-2);color:var(--inkt-2)}

/* Kengetalkaart */
.at-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--ruimte-3)}
.at-kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-l);padding:var(--ruimte-3) var(--ruimte-4);display:grid;gap:4px;box-shadow:var(--schaduw-kaart);align-content:start}
.at-kaart__label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-2)}
.at-kaart__waarde{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.at-kaart__sub{font-size:12px;color:var(--inkt-2)}
.at-plus{color:var(--winst)}.at-min{color:var(--verlies)}

/* Tabel */
.at-tabel{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-l);overflow-x:auto}
.at-tabel table{border-collapse:collapse;width:100%;font-size:14px}
.at-tabel th,.at-tabel td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--lijn);white-space:nowrap}
.at-tabel tr:last-child td{border-bottom:0}
.at-tabel th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-2);background:var(--vlak-2)}
.at-tabel .getal{text-align:right;font-variant-numeric:tabular-nums}
.at-tabel tbody tr:hover td{background:var(--grond)}

/* Melding */
.at-melding{display:flex;gap:var(--ruimte-3);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border-radius:var(--hoek-l);padding:12px 16px;font-size:14px;color:var(--inkt);background:var(--oranje-zacht)}
.at-melding b{color:var(--oranje-tekst)}
.at-melding--fout{background:var(--verlies-zacht)}
.at-melding--fout b{color:var(--verlies)}
.at-melding--gelukt{background:var(--winst-zacht)}
.at-melding--gelukt b{color:var(--winst)}

/* Menubalk */
.at-menubalk{display:flex;align-items:center;gap:var(--ruimte-4);padding:12px var(--ruimte-4);background:var(--vlak);border-bottom:1px solid var(--lijn);flex-wrap:wrap}
.at-merk{display:flex;align-items:center;gap:8px;font-family:var(--font-kop);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--inkt);text-decoration:none}
.at-merk__teken{width:30px;height:30px;flex:none;display:block}
.at-merk__teken .l{stroke:var(--teal);stroke-width:3.2;stroke-linecap:round;fill:none}
.at-merk__teken .k{fill:var(--teal-licht)}.at-merk__teken .k2{fill:var(--teal)}.at-merk__teken .o{fill:var(--oranje)}
.at-menu{display:flex;gap:2px;flex-wrap:wrap}
.at-menu a{font-size:14px;color:var(--inkt-2);text-decoration:none;padding:5px 11px;border-radius:var(--hoek-rond)}
.at-menu a:hover{color:var(--inkt);background:var(--vlak-2)}
.at-menu a[aria-current="page"]{color:var(--teal);font-weight:600;background:var(--teal-zacht)}
.at-menu a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Welkomstvlak */
.at-donker{background:var(--donker-vlak);color:var(--op-donker);border-radius:var(--hoek-l);padding:var(--ruimte-6);display:grid;gap:var(--ruimte-3)}
.at-donker h2{margin:0;font-family:var(--font-kop);font-weight:500;font-size:28px;line-height:34px;color:var(--op-donker)}
.at-donker h2 em{color:var(--oranje)}
.at-donker p{margin:0;opacity:.85;max-width:52ch}
.at-donker .at-knop{background:var(--op-donker);border-color:var(--op-donker);color:var(--donker-vlak)}
.at-donker .at-knop:focus-visible{outline-color:var(--oranje)}

/* Koppen */
.at-kop{font-family:var(--font-kop);font-weight:500;color:var(--inkt);margin:0;text-wrap:balance}
.at-kop em{font-style:italic;color:var(--oranje)}