/* Vecdraft-huisstijl: tokens voor app en website.
   Bron van waarheid voor kleuren, letters, maten. Licht is standaard;
   donker via prefers-color-scheme of data-thema="donker" op <html>. */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* neutraal */
  --vd-inkt: #17152A;          /* tekst, lijnen, donkere vlakken */
  --vd-inkt-2: #45435A;        /* lopende tekst, tweede niveau */
  --vd-grijs: #5A5870;         /* bijschriften, labels */
  --vd-lijn: #E7E6ED;          /* randen van kaarten */
  --vd-lijn-2: #C9C7D6;        /* randen van velden en knoppen */
  --vd-papier: #F6F4FC;        /* paginagrond */
  --vd-vlak: #FFFFFF;          /* kaarten, panelen */
  --vd-vlak-2: #FBFAFF;        /* tekenvlak, zachte vulling */

  /* merk */
  --vd-violet: #6050DC;        /* hoofdknop, ankerpunten; witte tekst erop */
  --vd-violet-tekst: #4B3CC4;  /* links en accenttekst op licht */
  --vd-violet-diep: #3A2E9E;   /* hover van links */
  --vd-violet-tint: #EAE6FF;   /* zachte markering */
  --vd-limoen: #D9F56A;        /* actief, gekozen, uitgelicht; altijd inkt erop */
  --vd-limoen-diep: #C6E64A;   /* hover van limoen */
  --vd-op-violet: #FFFFFF;
  --vd-op-limoen: #17152A;

  /* tekening */
  --vd-scan: #8A8799;          /* lijnen van de ingelezen scan */
  --vd-vector: #17152A;        /* nagetekende lijnen */

  /* status (verschillen ook in helderheid, niet alleen in tint) */
  --vd-goed: #1B7A4A;
  --vd-goed-tint: #E3F4EA;
  --vd-let-op: #8A5200;
  --vd-let-op-tint: #FBEFD9;
  --vd-fout: #B3261E;
  --vd-fout-tint: #FBE6E4;

  /* letters */
  --vd-sans: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --vd-mono: "DM Mono", "Cascadia Code", Consolas, monospace;

  /* maten */
  --vd-ruimte-1: 4px; --vd-ruimte-2: 8px; --vd-ruimte-3: 12px; --vd-ruimte-4: 16px;
  --vd-ruimte-5: 24px; --vd-ruimte-6: 32px; --vd-ruimte-7: 48px;
  --vd-hoek-s: 8px; --vd-hoek-m: 12px; --vd-hoek-l: 20px; --vd-hoek-rond: 999px;
  --vd-schaduw: 0 1px 2px rgba(23, 21, 42, .06), 0 4px 16px rgba(23, 21, 42, .06);
  --vd-focus: 0 0 0 3px #FFFFFF, 0 0 0 5px #6050DC;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --vd-inkt: #F6F4FC; --vd-inkt-2: #C9C5E0; --vd-grijs: #A7A3C2;
    --vd-lijn: #2E2B47; --vd-lijn-2: #4A4670;
    --vd-papier: #100F1C; --vd-vlak: #17152A; --vd-vlak-2: #1D1A33;
    --vd-violet-tekst: #A99BFF; --vd-violet-diep: #C4BAFF; --vd-violet-tint: #2A2552;
    --vd-scan: #6E6A8C; --vd-vector: #F6F4FC;
    --vd-goed: #6FD49A; --vd-goed-tint: #15301F;
    --vd-let-op: #F0B85A; --vd-let-op-tint: #33250C;
    --vd-fout: #FF8A80; --vd-fout-tint: #3A1614;
    --vd-schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --vd-focus: 0 0 0 3px #100F1C, 0 0 0 5px #A99BFF;
  }
}
:root[data-thema="donker"] {
  --vd-inkt: #F6F4FC; --vd-inkt-2: #C9C5E0; --vd-grijs: #A7A3C2;
  --vd-lijn: #2E2B47; --vd-lijn-2: #4A4670;
  --vd-papier: #100F1C; --vd-vlak: #17152A; --vd-vlak-2: #1D1A33;
  --vd-violet-tekst: #A99BFF; --vd-violet-diep: #C4BAFF; --vd-violet-tint: #2A2552;
  --vd-scan: #6E6A8C; --vd-vector: #F6F4FC;
  --vd-goed: #6FD49A; --vd-goed-tint: #15301F;
  --vd-let-op: #F0B85A; --vd-let-op-tint: #33250C;
  --vd-fout: #FF8A80; --vd-fout-tint: #3A1614;
  --vd-schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --vd-focus: 0 0 0 3px #100F1C, 0 0 0 5px #A99BFF;
}