/* Zero Slack Design — tokens voor de code (v1, 08-10-2026). GEDEELDE BRON voor Zero Slack OS én Zero Slack DM:
   /home/mia/mia-design/fundament/code/mia-design-tokens.css → 1-op-1 gekopieerd (sha256 gelijk) naar
   mia-os/public/mia-design/ en dashboard/public/ (platte naam, zelfde inhoud). Nooit per kopie aanpassen.
   Waarden = fundament/mia-design.css + bladen/00-fundament.html (regels: fundament/REGELS.md).
   Alleen --md-*-namen en één @font-face: dit bestand verandert zelf NIETS zichtbaar; pas wie de namen
   gebruikt (bouwstenen.css, of een schil achter html.mia-design) ziet het.
   Donker: html[data-thema="avond"] (DM + OS-schil) · html[data-mia-thema="avond"] (OS-apps in een venster)
           · .md-donker / [data-md-thema="donker"] (een stuk pagina). Licht forceren: .md-licht / [data-md-thema="licht"]. */

@font-face{font-family:"MD Inter";src:url("mia-design-inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ── kleur · licht (A1-A5) ── */
:root,.md-licht,[data-md-thema="licht"]{
  --md-tint:#00727A; --md-tint-2:#0A8A8F; --md-tint-zacht:rgba(0,114,122,.12); --md-op-tint:#fff;
  --md-label:#1d1d1f; --md-label-2:rgba(60,60,67,.62); --md-label-3:rgba(60,60,67,.32);
  --md-fill:rgba(120,120,128,.12); --md-fill-2:rgba(120,120,128,.08);
  --md-sep:rgba(60,60,67,.14);
  --md-grond:#f2f2f7; --md-vlak:#ffffff; --md-vlak-2:#f7f7fa; --md-vlak-op-glas:#ffffff;
  --md-groen:#34C759; --md-oranje:#FF9500; --md-rood:#FF3B30;
  --md-groen-tekst:#1f8a3d; --md-oranje-tekst:#b25f00; --md-rood-tekst:#c4271d;
  --md-groen-zacht:rgba(52,199,89,.14); --md-oranje-zacht:rgba(255,149,0,.14); --md-rood-zacht:rgba(255,59,48,.12);
  /* glas (C1-C4): dun = knoppen/chips op glas · normaal = bovenbalk/invoerbalk · dik = zijbalk/vel/dock */
  --md-glas-dun:rgba(255,255,255,.62); --md-glas:rgba(255,255,255,.62); --md-glas-dik:rgba(246,246,250,.78);
  --md-lichtrand:inset 0 .5px 0 rgba(255,255,255,.75),inset 0 0 0 .5px rgba(0,0,0,.06);
  --md-dimlaag:rgba(0,0,0,.28);
  --md-schakel-uit:rgba(120,120,128,.16); --md-seg-aan:#ffffff;
  --md-schaduw-s:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --md-schaduw-m:0 4px 14px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);
  --md-schaduw-l:0 24px 60px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.10);
  --md-rand:transparent;  /* alleen bij "meer contrast" een echte rand */
}
/* ── kleur · donker ── */
html[data-thema="avond"],html[data-mia-thema="avond"],.md-donker,[data-md-thema="donker"]{
  --md-tint:#2CC2C9; --md-tint-2:#40D0D6; --md-tint-zacht:rgba(44,194,201,.16); --md-op-tint:#00262a;
  --md-label:#f5f5f7; --md-label-2:rgba(235,235,245,.62); --md-label-3:rgba(235,235,245,.3);
  --md-fill:rgba(255,255,255,.08); --md-fill-2:rgba(255,255,255,.05);
  --md-sep:rgba(255,255,255,.09);
  /* Nacht (Daan 08-10 22:00): bijna zwart i.p.v. Apple-grijs #1c1c1e/#2c2c2e */
  --md-grond:#000000; --md-vlak:#0e0e10; --md-vlak-2:#1a1a1d; --md-vlak-op-glas:#1a1a1d;
  --md-groen:#30D158; --md-oranje:#FF9F0A; --md-rood:#FF453A;
  --md-groen-tekst:#30D158; --md-oranje-tekst:#FF9F0A; --md-rood-tekst:#FF6961;
  --md-groen-zacht:rgba(48,209,88,.18); --md-oranje-zacht:rgba(255,159,10,.18); --md-rood-zacht:rgba(255,69,58,.18);
  --md-glas-dun:rgba(30,30,34,.6); --md-glas:rgba(16,16,18,.62); --md-glas-dik:rgba(12,12,14,.8);
  --md-lichtrand:inset 0 .5px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.08);
  --md-dimlaag:rgba(0,0,0,.5);
  --md-schakel-uit:rgba(255,255,255,.14); --md-seg-aan:#2c2c30;
  --md-schaduw-s:0 1px 2px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.2);
  --md-schaduw-m:0 4px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --md-schaduw-l:0 24px 60px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35);
}

/* color-scheme alleen op een los stuk pagina, nooit op <html>: dat zou schuifbalken en formulieren van de bestaande schil veranderen */
.md-licht,[data-md-thema="licht"]{color-scheme:light}
.md-donker,[data-md-thema="donker"]{color-scheme:dark}

/* ── letters (B1-B7), schaal in rem zodat Zero Slack meegroeit met de lettergrootte van de gebruiker ── */
:root{
  --md-letter:-apple-system,BlinkMacSystemFont,"SF Pro Text","MD Inter","Inter",system-ui,sans-serif;
  --md-letter-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace; /* alleen code, ID's, logs (B7) */
  /* maat · regelafstand · spatiëring · gewicht */
  --md-t-groot:2.125rem;   --md-t-groot-rh:1.08;  --md-t-groot-ls:-.022em;  --md-t-groot-g:700;   /* 34 */
  --md-t-titel1:1.75rem;   --md-t-titel1-rh:1.12; --md-t-titel1-ls:-.02em;  --md-t-titel1-g:700;  /* 28 */
  --md-t-titel2:1.375rem;  --md-t-titel2-rh:1.18; --md-t-titel2-ls:-.016em; --md-t-titel2-g:700;  /* 22 */
  --md-t-titel3:1.0625rem; --md-t-titel3-rh:1.24; --md-t-titel3-ls:-.01em;  --md-t-titel3-g:600;  /* 17 */
  --md-t-tekst:.8125rem;   --md-t-tekst-rh:1.38;  --md-t-tekst-ls:-.003em;                        /* 13 desktop */
  --md-t-sub:.75rem;       --md-t-sub-rh:1.4;     --md-t-sub-ls:0;                                 /* 12 */
  --md-t-voet:.6875rem;    --md-t-voet-rh:1.36;   --md-t-voet-ls:.006em;                           /* 11 */
  /* ruimte (E1, raster 4 px) */
  --md-ruimte-1:4px; --md-ruimte-2:8px; --md-ruimte-3:12px; --md-ruimte-4:16px; --md-ruimte-5:20px; --md-ruimte-6:24px; --md-ruimte-8:32px;
  --md-binnen:20px;   /* binnenruimte: 20 desktop / 16 telefoon */
  --md-raak:28px;     /* hoogte van een knop; op aanraak 44 (E3) */
  /* hoeken (E2) */
  --md-r-rond:999px; --md-r-groep:12px; --md-r-kaart:16px; --md-r-vel:22px; --md-r-venster:12px; --md-r-icoon:22.5%; --md-r-veld:9px;
  /* glas (C3): vervaging per zwaarte */
  --md-blur-dun:20px; --md-blur:30px; --md-blur-dik:40px; --md-verzadig:180%;
  /* beweging (D1, D2, D9). Echte veren via veer.js; dit zijn de CSS-benaderingen voor eenvoudige overgangen. */
  --md-duur-druk:100ms; --md-druk-schaal:.97; --md-duur-vervaag:200ms;
  --md-veer-standaard:cubic-bezier(.32,.72,0,1); --md-veer-standaard-duur:350ms;   /* demping 1,0 · 0,35 s */
  --md-veer-vel:cubic-bezier(.32,.72,0,1);       --md-veer-vel-duur:300ms;         /* demping 1,0 · 0,30 s */
  --md-veer-weg:cubic-bezier(.3,1.2,.4,1);       --md-veer-weg-duur:400ms;         /* demping 0,8 · 0,40 s */
  --md-beweging:1;  /* 0 bij "minder beweging" */
  /* lagen */
  --md-z-menu:2147482000; --md-z-vel:2147481000; --md-z-melding:2147483000;
}
/* telefoon: lopende tekst 15, binnenruimte 16, raakvlak 44 (B6, E1, E3) */
@media (max-width:700px){:root{--md-t-tekst:.9375rem;--md-t-tekst-rh:1.42;--md-t-tekst-ls:-.006em;--md-binnen:16px}}
@media (pointer:coarse){:root{--md-raak:44px}}

/* ── toegankelijkheid (D9) ── */
@media (prefers-reduced-motion:reduce){:root{--md-beweging:0;--md-duur-druk:0ms;--md-druk-schaal:1}}
@media (prefers-reduced-transparency:reduce){
  :root,.md-licht,[data-md-thema="licht"],html[data-thema="avond"],html[data-mia-thema="avond"],.md-donker,[data-md-thema="donker"]{
    --md-glas-dun:var(--md-vlak); --md-glas:var(--md-vlak); --md-glas-dik:var(--md-vlak); --md-blur-dun:0px; --md-blur:0px; --md-blur-dik:0px; --md-verzadig:100%}
}
@media (prefers-contrast:more){
  :root,.md-licht,[data-md-thema="licht"]{--md-label-2:rgba(40,40,46,.86);--md-label-3:rgba(40,40,46,.6);--md-sep:rgba(60,60,67,.42);--md-rand:rgba(0,0,0,.55);--md-tint:#005A60;
    --md-glas-dun:var(--md-vlak); --md-glas:var(--md-vlak); --md-glas-dik:var(--md-vlak); --md-blur-dun:0px; --md-blur:0px; --md-blur-dik:0px}
  html[data-thema="avond"],html[data-mia-thema="avond"],.md-donker,[data-md-thema="donker"]{--md-label-2:rgba(235,235,245,.86);--md-label-3:rgba(235,235,245,.6);--md-sep:rgba(160,160,168,.6);--md-rand:rgba(255,255,255,.6);--md-tint:#5FDDE2;
    --md-glas-dun:var(--md-vlak); --md-glas:var(--md-vlak); --md-glas-dik:var(--md-vlak); --md-blur-dun:0px; --md-blur:0px; --md-blur-dik:0px}
}