/*
 * Datow — Stijlgids & Design System v1.0, sectie 2 en 4.
 *
 * DIT IS DE ENIGE PLEK IN DE UI WAAR EEN HEXWAARDE MAG STAAN.
 * Componenten verwijzen uitsluitend naar tokens (gids §7, eerste verbod). Een test in
 * DataDocs.UnitTests bewaakt dat: een hexwaarde in components.css of in een .cshtml laat
 * de build falen.
 *
 * De waarden hieronder zijn letterlijk overgenomen uit de tabel in §2 van de gids. Waar de gids
 * een token wél noemt maar geen waarde geeft, staat er een blok "AFGELEID" of "INGEVULD" met de
 * afleiding erbij. Zie docs/design-system.md voor de volledige verantwoording.
 */

/* ============================================================================
   Themaonafhankelijk: merk, accent en status
   Deze acht staan in §2 zonder onderscheid tussen licht en donker.
   ============================================================================ */

:root {
    --brand: #2b2e83;
    --brand-2: #3b50b5;
    --accent: #1f9fdc;
    --accent-2: #5bc2f0;

    --ok: #1a9d6a;
    --warn: #bd7d00;
    --err: #d33f3f;
    --info: #3b50b5;
}

/* ============================================================================
   Licht — de standaard (gids §2: "Beide thema's zijn gelijkwaardig — licht is
   de standaard.")
   ============================================================================ */

[data-theme="light"] {
    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f4f6fa;
    --surface-3: #e9edf3;
    --border: #e3e8ef;
    --border-strong: #ccd4e0;
    --text: #161a23;
    --text-2: #5a6477;
    --text-3: #98a1b2;
    --brand-soft: #eaecf7;
    --accent-soft: #e6f4fb;
    --sidebar: #ffffff;

    /* AFGELEID — de gids noemt --ok-soft, --warn-soft, --err-soft en --info-soft bij naam maar
       geeft er geen waarde bij. Ze zijn gemengd op 11% van de statuskleur over #ffffff. Die 11%
       is geen schatting: hij is teruggerekend uit de wél gegeven --accent-soft (#e6f4fb uit
       --accent #1f9fdc) en klopt daar op alle drie de kanalen exact. */
    --ok-soft: #e6f4ef;
    --warn-soft: #f8f1e3;
    --err-soft: #faeaea;
    --info-soft: #e9ecf7;

    /* INGEVULD — de gids noemt --shadow als de bovengrens ("schaduwen zwaarder dan --shadow" is
       verboden) maar geeft geen waarde. Bewust vlak: twee korte lagen die een kaart net van het
       werkvlak tillen, zonder de diepte die §1 "decoratief" zou noemen. */
    --shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);

    /* INGEVULD — de gids kent geen modal, dus ook geen achtergrondwaas. Donker genoeg om de
       pagina eronder duidelijk buiten spel te zetten, licht genoeg om de context te zien. */
    --backdrop: rgb(11 14 21 / 45%);

    /* INGEVULD — zie docs/design-system.md, openstaand punt 1. De gids verbiedt een zichtbare
       focusring bij formuliervelden buiten de randkleurwissel. --brand haalt tegen zowel het
       veldvlak (10,7:1) als het werkvlak (10,2:1) ruim de 3:1 die een focusindicator nodig heeft,
       dus de gids kan gevolgd worden zonder de toegankelijkheidseis te breken. */
    --focus-border: var(--brand);

    /* INGEVULD — zie docs/design-system.md, openstaand punt 2. De gids geeft --brand en --accent
       zonder onderscheid tussen de thema's, maar schrijft ze wél voor als VOORGROND op een
       soft-vlak ("Actief = --brand-soft vlak met --brand tekst") en als vlak achter een label
       (de primaire knop). In het lichte thema klopt dat; in het donkere niet, want dan staat een
       donkerblauwe tekst op een donkerblauw vlak. Deze twee tokens maken die rol expliciet. */
    --brand-fg: var(--brand);
    --on-brand: var(--surface);

    /* Ink op een verzadigd statusvlak. Wit haalt op --ok maar 3,4:1; deze donkere waarde haalt
       5,4:1 en is geen nieuwe kleur — het is dezelfde als het codeblokvlak uit §5. */
    --on-ok: var(--code-bg);

    /* Statuskleur als TEKST. In het lichte thema is dat de statuskleur zelf. */
    --ok-fg: var(--ok);
    --warn-fg: var(--warn);
    --err-fg: var(--err);
    --info-fg: var(--info);
}

/* ============================================================================
   Donker
   ============================================================================ */

[data-theme="dark"] {
    --bg: #0b0e15;
    --surface: #141926;
    --surface-2: #1b2231;
    --surface-3: #232c3d;
    --border: #283143;
    --border-strong: #3a4558;
    --text: #e7ebf3;
    --text-2: #99a3b6;
    --text-3: #697489;
    --brand-soft: #1a2440;
    --accent-soft: #0f2839;
    --sidebar: #0e121b;

    /* AFGELEID — 18% van de statuskleur over --bg (#0b0e15), op dezelfde manier teruggerekend
       uit de gegeven --accent-soft (#0f2839) en daar exact kloppend. */
    --ok-soft: #0e2824;
    --warn-soft: #2b2211;
    --err-soft: #2f171d;
    --info-soft: #141a32;

    /* Donkerder en iets dieper: op een donker vlak verdwijnt een schaduw van 4% volledig. */
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 24%);
    --backdrop: rgb(0 0 0 / 60%);

    /* --brand is op een donker vlak te donker voor een focusindicator; --accent-2 haalt 7,9:1
       tegen het veldvlak en 9,6:1 tegen het werkvlak. */
    --focus-border: var(--accent-2);

    /* --brand op --brand-soft haalt in het donkere thema 2,2:1 en is daarmee onleesbaar.
       --accent-2 haalt 7,6:1 en is een token uit de gids zelf, dus er komt geen kleur bij. */
    --brand-fg: var(--accent-2);

    /* --surface is hier donker; een label op een --brand-vlak moet juist licht zijn. */
    --on-brand: var(--text);

    --on-ok: var(--code-bg);

    /* De statuskleuren uit §2 zijn getekend voor een licht vlak. Als TEKST op een donker vlak
       halen --info (2,5:1) en --err (3,8:1) de leesbaarheidsgrens niet — en een statusbadge is
       precies waar je dat niet wil. De gids levert de oplossing zelf: het codeblok-palet uit §5
       is dezelfde statusfamilie, getekend voor een donkere ondergrond. Er komt dus geen kleur
       bij; hij wordt hergebruikt in de rol waarvoor hij is gemaakt. */
    --ok-fg: var(--code-ok);
    --warn-fg: var(--code-warn);
    --err-fg: var(--code-err);
    --info-fg: var(--code-key);
}

/* ============================================================================
   Codeblok — vast palet, in beide thema's identiek (gids §5, "Codeblok & logvenster")
   De uitzondering die §7 zelf benoemt: "uitsluitend tokens (behalve de vaste codeblok-palet)".
   Ze staan hier alsnog als token, zodat componentcode ook hier geen hex hoeft te bevatten.
   ============================================================================ */

:root {
    --code-bg: #0e121b;
    --code-key: #7dd3fc;
    --code-muted: #5b6680;
    --code-ok: #34d399;
    --code-warn: #e0a72e;
    --code-err: #f87171;
    --code-line-height: 1.7;
}

/* ============================================================================
   Maten — gids §4. Vaste maten en radii, letterlijk overgenomen.
   Waar de gids een bereik geeft (10–11px) staat de gekozen waarde erbij toegelicht.
   ============================================================================ */

:root {
    /* Vaste maten */
    --nav-width: 236px;
    --topbar-height: 56px;
    --inspector-width: 330px;
    --detail-width: 440px; /* gids: 400–480px; het midden van het bereik */
    --page-padding: 22px 24px;

    /* Radius. De gids geeft bereiken; per component één waarde, zodat §7 ("geen nieuwe
       radiuswaarden") ook binnen de applicatie geldt. */
    --radius-card: 10px; /* §4 is hier expliciet: "Elke kaart: ... radius 10px" */
    --radius-control: 8px; /* knop / input, uit 7–8px */
    --radius-pill: 20px; /* pill / badge */
    --radius-code: 8px; /* codeblok, uit 7–9px */
    --radius-icon: 9px; /* iconvlak, uit 8–10px */

    /* Ruimte. Groepen worden met flex/grid en gap gelegd, nooit met marges per element (§4). */
    --gap-grid: 13px; /* kaartrasters, uit 12–14px */
    --gap-nav-icon: 11px;
    --gap-button-icon: 7px;

    /* Typografie — §3. De basismaat is 13px en de schaal is bewust kort. */
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    --size-page-title: 22px;
    --size-card-title: 14px;
    --size-stat: 25px;
    --size-body: 13px;
    --size-cell: 12.5px;
    --size-label: 10.5px; /* sectielabel, uit 10–11px */
    --size-mono: 12px; /* uit 10,5–12,5px */
    --size-mono-small: 10.5px;
    --size-badge: 11px;

    --tracking-page-title: -0.015em;
    --tracking-stat: -0.02em;
    --tracking-label: 0.06em; /* uit .05–.08em */

    /* INGEVULD — de gids beschrijft geen bewegingsduur. Kort genoeg om niet op te vallen; alles
       wordt uitgezet bij prefers-reduced-motion. */
    --transition: 120ms ease;

    /* INGEVULD — responsive, zie docs/design-system.md openstaand punt 6. De gids gaat uit van
       een vast frame; dit is een beheerinterface, geen publieke site. */
    --breakpoint-compact: 1000px;
}