/* Thema Hoogtelijnen: grafiet en amber, donker en licht (uit docs/ontwerp/q_kern.py). */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root,
[data-thema="donker"] {
  color-scheme: dark;
  --bg: #111315; --vlak: #191C1F; --vlak2: #22262A; --vlak3: #2E3338;
  --rand: #262A2F; --rand2: #3A4047; --lijn: #24282C; --spoor: rgba(255,255,255,0.14);
  --inkt: #F4F4F2; --inkt2: #D8DADD; --zacht: #A3A7AD; --dim: #9197A0;   /* >= 4,5:1 op bg en vlak (kleine tekst) */
  --accent: #F2B544; --op-accent: #2A1D00; --accent-tekst: #F2B544;
  --accent-vlak: rgba(242,181,68,0.13); --accent-rand: rgba(242,181,68,0.55);
  --inv: #F4F4F2; --op-inv: #111315; --op-inv-zacht: #4A4F56; --inv-lijn: rgba(17,19,21,0.14);
  --ok: #74D6A4; --ok-vlak: rgba(116,214,164,0.14); --ok-vol: #3FBF85; --op-ok: #06281A;
  --schade: #FF8F84; --schade-vol: #FF6B5E; --op-schade: #2A0906; --schade-vlak: rgba(255,107,94,0.15);
  --schade-op-inv: #D93A2B; --meetlijn: rgba(255,255,255,0.08);
  --foto: #2A2F36; --foto2: #343A42; --foto-lijn: #6B737D; --foto-wit: #F2F3F5; --foto-merk: #F08A4B;
  --wit: #FFFFFF; --qr: #0F1115;
  --contour: rgba(255,255,255,0.12); --contour-accent: rgba(242,181,68,0.5);
  --knop-schaduw: 0 1px 2px rgba(0,0,0,0.35);
  --buiten: #0A0B0C;
  --schaduw: 0 12px 32px rgba(0,0,0,0.45);
}

[data-thema="licht"] {
  color-scheme: light;
  --bg: #F4F3EF; --vlak: #FFFFFF; --vlak2: #F0EFEA; --vlak3: #E4E3DD;
  --rand: #E3E2DC; --rand2: #C8C7C0; --lijn: #EEEDE8; --spoor: #D6D5CE;
  --inkt: #15171A; --inkt2: #3A3E44; --zacht: #5F646B; --dim: #666B72;   /* >= 4,5:1 op bg en vlak (kleine tekst) */
  --accent-tekst: #855600; --accent-vlak: #FBF0D5; --accent-rand: #D99A22;
  --inv: #15171A; --op-inv: #FFFFFF; --op-inv-zacht: #C3C6CB; --inv-lijn: rgba(255,255,255,0.16);
  --ok: #17693A; --ok-vlak: #E3F3E9; --ok-vol: #1E8A4C; --op-ok: #FFFFFF;
  --schade: #A8321F; --schade-vol: #C8402F; --op-schade: #FFFFFF; --schade-vlak: #FBE9E4;
  --schade-op-inv: #FF8A7A; --meetlijn: rgba(21,23,26,0.08);
  --foto: #1F242B; --foto2: #262B33; --foto-lijn: #5C6470;
  --contour: rgba(21,23,26,0.10); --contour-accent: rgba(196,134,14,0.8);
  --knop-schaduw: 0 1px 2px rgba(15,17,21,0.25);
  --buiten: #E7E6E1;
  --schaduw: 0 12px 32px rgba(21,23,26,0.12);
}