/* AIVO Mainframe - ontwerptokens. Zie docs/UI-SPECIFICATION.md */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

/* Licht thema (standaard) */
:root {
  --bg: #EEF2F8;
  --vlek-1: rgba(61, 211, 196, 0.38);
  --vlek-2: rgba(255, 143, 90, 0.30);
  --vlek-3: rgba(124, 150, 255, 0.28);
  --glas: rgba(255, 255, 255, 0.58);
  --glas-sterk: rgba(255, 255, 255, 0.86);
  --glas-rand: rgba(255, 255, 255, 0.9);
  --lijn: rgba(11, 23, 51, 0.09);
  --binnen: rgba(11, 23, 51, 0.045);
  --schaduw: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 32px rgba(15, 23, 42, 0.08);
  --tekst: #0B1733;
  --gedempt: #4A5675;
  --link: #0B7A70;
  --link-hover: #075E56;
  --oranje-tekst: #B4501E;
  --primair: #0B1733;
  --op-primair: #FFFFFF;
  --accent: #FF8F5A;
  --op-accent: #0B1733;
  --focus: #3DD3C4;
  --goed: #0B7A70;
  --fout: #B42318;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-merk: "Montserrat", "Inter", sans-serif;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 24px;
  --blur: blur(28px) saturate(180%);
  color-scheme: light;
}

/* Donker thema: via systeem, tenzij Ivo licht kiest */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --bg: #0A0F1E;
    --vlek-1: rgba(61, 211, 196, 0.22);
    --vlek-2: rgba(255, 143, 90, 0.16);
    --vlek-3: rgba(96, 120, 255, 0.22);
    --glas: rgba(30, 39, 66, 0.55);
    --glas-sterk: rgba(20, 28, 50, 0.86);
    --glas-rand: rgba(255, 255, 255, 0.10);
    --lijn: rgba(255, 255, 255, 0.09);
    --binnen: rgba(255, 255, 255, 0.06);
    --schaduw: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
    --tekst: #EEF2FB;
    --gedempt: #AEB8D3;
    --link: #5EE6D8;
    --link-hover: #9AF0E7;
    --oranje-tekst: #FFA77A;
    --primair: #3DD3C4;
    --op-primair: #0B1733;
    --goed: #5EE6D8;
    --fout: #FF8A80;
    color-scheme: dark;
  }
}

/* Donker thema: handmatig gekozen */
:root[data-thema="donker"] {
  --bg: #0A0F1E;
  --vlek-1: rgba(61, 211, 196, 0.22);
  --vlek-2: rgba(255, 143, 90, 0.16);
  --vlek-3: rgba(96, 120, 255, 0.22);
  --glas: rgba(30, 39, 66, 0.55);
  --glas-sterk: rgba(20, 28, 50, 0.86);
  --glas-rand: rgba(255, 255, 255, 0.10);
  --lijn: rgba(255, 255, 255, 0.09);
  --binnen: rgba(255, 255, 255, 0.06);
  --schaduw: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
  --tekst: #EEF2FB;
  --gedempt: #AEB8D3;
  --link: #5EE6D8;
  --link-hover: #9AF0E7;
  --oranje-tekst: #FFA77A;
  --primair: #3DD3C4;
  --op-primair: #0B1733;
  --goed: #5EE6D8;
  --fout: #FF8A80;
  color-scheme: dark;
}

/* Minder transparantie gevraagd: glas wordt dicht */
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: var(--bg); --glas-sterk: var(--bg); --blur: none; }
}