/* CN-beheer · TOKENS — de letter en de kleuren van de site (W3 "Het atelier", ONTWERP-V2 §2).
   Bron: _ontwerp/wow/LETTER.md, w3-atelier/kern/basis.css en atelier.css. Geen echte kleur, net als de site; de paletten braam en kit
   van het prototype vervallen. Elk scherm leest alleen --cn-* (de oude namen blijven, zodat de boekhoudschermen vanzelf meegaan);
   de namen van de site (--papier, --inkt …) staan erbij voor nieuwe schermen.
   Licht en donker (het avondatelier): systeem, of geforceerd met [data-theme="light"|"dark"] op <html>. Beide donkere blokken gelijk houden.
   Het factuurvel blijft in beide standen licht papier (een vel op een donkere tafel): zie .paper in app.css.
   Contrast (WCAG AA, gemeten met tests/contrast.mjs): elk tekstpaar ≥ 4,5 : 1 in licht én donker. */

/* ---------- letters (zelf gehost, SIL OFL 1.1; licenties in fonts/licenties) ---------- */
@font-face { font-family: "CN Tekst"; src: url(../fonts/instrument-sans-400.36b03f65f5.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CN Tekst"; src: url(../fonts/instrument-sans-500.64108bf67b.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CN Kop"; src: url(../fonts/newsreader-kop-400.995fc75ae3.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CN Kop"; src: url(../fonts/newsreader-kop-400-italic.75a6351c04.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CN Display"; src: url(../fonts/newsreader-display-340.d52e0ce134.woff2) format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CN Display"; src: url(../fonts/newsreader-display-340-italic.62a6dc3735.woff2) format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }
/* reserveletters met size-adjust (gemeten op de site): geen verspringing als de echte letter binnenkomt */
@font-face { font-family: "CN Kop reserve"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); size-adjust: 102.7%; ascent-override: 71.6%; descent-override: 25.8%; line-gap-override: 0%; }
@font-face { font-family: "CN Display reserve"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); size-adjust: 107%; ascent-override: 68.7%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "CN Tekst reserve"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 100.6%; ascent-override: 96.4%; descent-override: 24.9%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* ---------- de kleuren van de site (licht) ---------- */
  --papier: #ece6de; --vel: #f6f1ea; --vel-diep: #e3dbd0; --inkt: #1b1918; --tekst: #3a332e; --zacht: #463b33; --fijn: #6b5f55;
  --haar: #cdbfb0; --nude: #d9c3b4; --espresso: #241812;
  --glas: rgb(247 242 235 / .86);
  --goed: #4e6650; --letop: #8a5a14; --fout: #9a3324;

  /* ---------- de namen die de schermen gebruiken ---------- */
  --cn-ink: var(--inkt);
  --cn-paper: var(--papier);
  --cn-bg: var(--papier);
  --cn-bg-2: #e6dfd5;
  --cn-sunk: var(--vel-diep);
  --cn-card: var(--vel);
  --cn-field: #fbf8f4;
  --cn-text: var(--inkt);
  --cn-text-2: var(--tekst);
  --cn-muted: var(--zacht);
  --cn-faint: var(--fijn);
  --cn-line: var(--haar);
  --cn-line-2: #8f7e6f;              /* rand van een bedieningselement: ≥ 3 : 1 op vel en papier (WCAG 1.4.11) */
  --cn-hair: rgb(27 25 24 / .09);
  --cn-nude: var(--nude);
  --cn-nude-2: #c4a896;
  --cn-blush: #eadbd0;
  --cn-nude-ink: #4f3d31;
  --cn-accent: var(--inkt);
  --cn-accent-ink: var(--inkt);
  --cn-accent-tint: rgb(84 60 44 / .07);
  --cn-accent-tint-2: rgb(84 60 44 / .14);
  --cn-select: var(--nude);
  --cn-on-accent: #f6f1ea;
  --cn-solid: var(--inkt);
  --cn-solid-hover: #2f2a27;
  --cn-dark: var(--espresso);
  --cn-on-dark: #f3ece2;

  /* status: alleen in een badge of een rand, nooit als vlak */
  --cn-ok: var(--goed);  --cn-ok-tint: rgb(78 102 80 / .11);
  --cn-warn: var(--letop); --cn-warn-tint: rgb(138 90 20 / .10);
  --cn-bad: var(--fout);  --cn-bad-tint: rgb(154 51 36 / .08);
  --cn-info: var(--cn-nude-ink); --cn-info-tint: rgb(217 195 180 / .55);
  --cn-ok-ink: #3f5541; --cn-warn-ink: #74490c; --cn-bad-ink: #84291c;

  /* grafiek (de dunne inktlijn) */
  --cn-chart-1: var(--inkt);
  --cn-chart-2: #a88b76;
  --cn-chart-3: var(--haar);
  --cn-chart-grid: rgb(27 25 24 / .08);

  /* papier: de korrel van de site, en de kasboeklijn van Boekhouding (6 % inkt) */
  --cn-papier-beeld: url(../beeld/papier.83198872bb.webp);
  --cn-grain-opacity: .05;
  --cn-grain-blend: multiply;
  --cn-rule: rgb(27 25 24 / .06);

  /* schaduw: zacht en warm, nooit grijs */
  --cn-shadow-1: 0 1px 0 rgb(255 255 255 / .7) inset, 0 1px 2px rgb(60 40 25 / .05), 0 14px 30px -22px rgb(60 40 25 / .32);
  --cn-shadow-2: 0 1px 0 rgb(255 255 255 / .6) inset, 0 2px 6px rgb(60 40 25 / .05), 0 30px 60px -30px rgb(60 40 25 / .40);
  --cn-shadow-paper: 0 1px 1px rgb(60 40 25 / .06), 0 8px 14px -8px rgb(60 40 25 / .14), 0 34px 70px -34px rgb(60 40 25 / .38);
  --cn-shadow-sheet: 0 -1px 0 rgb(255 255 255 / .6) inset, 0 -30px 60px -30px rgb(40 28 20 / .38);
  --cn-shadow-glas: 0 1px 0 rgb(255 255 255 / .55) inset, 0 10px 30px -18px rgb(60 40 25 / .35);
  --cn-scrim: rgb(27 20 15 / .34);
  --cn-focus: var(--inkt);

  /* letters */
  --cn-f-display: "CN Display", "CN Display reserve", "Times New Roman", serif;
  --cn-f-serif: "CN Kop", "CN Kop reserve", "Times New Roman", serif;
  --cn-f-sans: "CN Tekst", "CN Tekst reserve", Arial, sans-serif;
  --cn-f-num: var(--cn-f-sans);
  --cn-fs: 16px;
  --cn-fs-s: 15px;
  --cn-fs-xs: 14px;
  --cn-fs-label: 12px;
  --cn-track: .12em;

  /* vorm: kaarten 24 px, pillen, velden 12 px; raster van 8 px */
  --cn-r: 24px;
  --cn-r-s: 16px;
  --cn-r-xs: 12px;
  --cn-pill: 999px;
  --cn-gut: 16px;
  --cn-top-h: 60px;
  --cn-nav-h: 68px;
  --cn-fab-h: 0px;             /* Nieuw zit in de balk (R-33): geen zwevende knop meer */
  --cn-tap: 44px;
  --cn-rail-w: 0px;
  --cn-safe-t: env(safe-area-inset-top, 0px);
  --cn-safe-b: env(safe-area-inset-bottom, 0px);

  /* beweging: een blad schuift omhoog (280 ms), een tab slaat om (240 ms), het stempel drukt (400 ms) */
  --cn-silk: cubic-bezier(.19, .8, .12, 1);
  --cn-snap: cubic-bezier(.3, .7, .1, 1);
  --cn-t: .28s;
  --cn-t-fast: .16s;
}
@media (min-width: 768px) { :root { --cn-fs: 17px; --cn-gut: 24px; } }

/* ---------- het avondatelier (donker) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #1e1611; --vel: #2a1f18; --vel-diep: #17110d; --inkt: #f1ebe2; --tekst: #e4dbcf; --zacht: #ddd2c4; --fijn: #b3a596;
    --haar: #5b4b3f; --nude: #4a382c; --espresso: #241812; --glas: rgb(30 22 17 / .88);
    --goed: #9db59f; --letop: #d9a75a; --fout: #e08a78;
    --cn-bg-2: #241a14; --cn-field: #1f1712; --cn-line-2: #85705f; --cn-hair: rgb(241 235 226 / .09);
    --cn-nude-2: #6f5646; --cn-blush: #3a2b22; --cn-nude-ink: #ead6c6;
    --cn-accent-tint: rgb(234 214 198 / .07); --cn-accent-tint-2: rgb(234 214 198 / .14);
    --cn-on-accent: #1e1611; --cn-solid-hover: #ffffff; --cn-dark: #f1ebe2; --cn-on-dark: #241812;
    --cn-ok-tint: rgb(157 181 159 / .13); --cn-warn-tint: rgb(217 167 90 / .13); --cn-bad-tint: rgb(224 138 120 / .12); --cn-info-tint: rgb(74 56 44 / .9);
    --cn-ok-ink: var(--goed); --cn-warn-ink: var(--letop); --cn-bad-ink: var(--fout);
    --cn-chart-2: #9a7f6a; --cn-chart-grid: rgb(241 235 226 / .08);
    --cn-papier-beeld: none; --cn-grain-opacity: .04; --cn-grain-blend: screen; --cn-rule: rgb(241 235 226 / .05);
    --cn-shadow-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 14px 30px -20px rgb(0 0 0 / .7);
    --cn-shadow-2: 0 1px 0 rgb(255 255 255 / .04) inset, 0 28px 56px -26px rgb(0 0 0 / .8);
    --cn-shadow-paper: 0 1px 1px rgb(0 0 0 / .35), 0 34px 70px -32px rgb(0 0 0 / .85);
    --cn-shadow-sheet: 0 -1px 0 rgb(255 255 255 / .04) inset, 0 -30px 60px -30px rgb(0 0 0 / .8);
    --cn-shadow-glas: 0 1px 0 rgb(255 255 255 / .04) inset, 0 12px 30px -16px rgb(0 0 0 / .7);
    --cn-scrim: rgb(0 0 0 / .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #1e1611; --vel: #2a1f18; --vel-diep: #17110d; --inkt: #f1ebe2; --tekst: #e4dbcf; --zacht: #ddd2c4; --fijn: #b3a596;
  --haar: #5b4b3f; --nude: #4a382c; --espresso: #241812; --glas: rgb(30 22 17 / .88);
  --goed: #9db59f; --letop: #d9a75a; --fout: #e08a78;
  --cn-bg-2: #241a14; --cn-field: #1f1712; --cn-line-2: #85705f; --cn-hair: rgb(241 235 226 / .09);
  --cn-nude-2: #6f5646; --cn-blush: #3a2b22; --cn-nude-ink: #ead6c6;
  --cn-accent-tint: rgb(234 214 198 / .07); --cn-accent-tint-2: rgb(234 214 198 / .14);
  --cn-on-accent: #1e1611; --cn-solid-hover: #ffffff; --cn-dark: #f1ebe2; --cn-on-dark: #241812;
  --cn-ok-tint: rgb(157 181 159 / .13); --cn-warn-tint: rgb(217 167 90 / .13); --cn-bad-tint: rgb(224 138 120 / .12); --cn-info-tint: rgb(74 56 44 / .9);
  --cn-ok-ink: var(--goed); --cn-warn-ink: var(--letop); --cn-bad-ink: var(--fout);
  --cn-chart-2: #9a7f6a; --cn-chart-grid: rgb(241 235 226 / .08);
  --cn-papier-beeld: none; --cn-grain-opacity: .04; --cn-grain-blend: screen; --cn-rule: rgb(241 235 226 / .05);
  --cn-shadow-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 14px 30px -20px rgb(0 0 0 / .7);
  --cn-shadow-2: 0 1px 0 rgb(255 255 255 / .04) inset, 0 28px 56px -26px rgb(0 0 0 / .8);
  --cn-shadow-paper: 0 1px 1px rgb(0 0 0 / .35), 0 34px 70px -32px rgb(0 0 0 / .85);
  --cn-shadow-sheet: 0 -1px 0 rgb(255 255 255 / .04) inset, 0 -30px 60px -30px rgb(0 0 0 / .8);
  --cn-shadow-glas: 0 1px 0 rgb(255 255 255 / .04) inset, 0 12px 30px -16px rgb(0 0 0 / .7);
  --cn-scrim: rgb(0 0 0 / .55);
}