/* =====================================================================
   TOKENS v2 ("Cockpit") — admin + portal (light only)
   ---------------------------------------------------------------------
   Bron: `.claude/plans/redesign-2026-10.md` §1 (palet, typografie,
   spacing, radius, dichtheid, beweging). Elke hex in het v2-blok staat
   letterlijk in de palettabel van dat plan, met het daar gemeten contrast.
   Korte tabel voor bouwers: `docs/redesign/tokens-v2.md`.

   OPBOUW (besluit D1): twee blokken in één scope.
     1. v2-tokens        de namen (`--canvas`, `--ink`, `--line`, ...).
     2. dichtheid        `[data-density]` zet de maattokens (onderaan).
   De OUDE v1-namen (`--bg-canvas`, `--text-1`, `--border`, `--status-*`, ...) zijn in
   Golf 6 (taak 6.3) uit de code gehaald en het aliasblok is weg: schrijf alleen v2-namen.

   Gescoped op `html:has(.admin-chrome, .portal-chrome, .admin-auth-page)`:
   specificiteit (0,1,1) verslaat de publieke `:root` (0,1,0) zonder JS,
   zonder bootstrap-script en zonder attribuut op <html>. Werkt ook voor
   geportalde overlays (Modal/Drawer/Toast/Spotlight renderen in <body>,
   maar erven van <html>). Zie docs/adr/0025-tokens-gescoped-op-html-has.md.

   Er is GEEN donker thema in deze zones (ADR 0014, D16). `--night` is een
   bewust donker VLAK (auth-achtergrond, logpanelen, mobiele onderbalk),
   geen thema.

   KLEURREGEL (ADR 0029): lime (`--accent`) is een markeerstift: primaire
   actie, positie, "volgende stap" — nooit tekst, nooit een statuskleur.
   Tekst op lime is `--accent-ink`; tekst/lijn in de lime-familie is
   `--selection-ink`.
   ===================================================================== */

:root {
    color-scheme: light;

    /* Fonts: in Laravel geen next/font; <x-fss::fonts> laadt ze, deze namen zijn de CSS-families. */
    --font-inter: "Inter";
    --font-inter-tight: "Inter Tight";
    --font-bricolage: "Bricolage Grotesque";
    --font-geist-mono: "Geist Mono";

    /* =================================================================
       1. v2-TOKENS
       ================================================================= */

    /* --- Vlakken --- */
    --canvas: #f7f7f5; /* v5 papier: warm-neutraal, kaarten (wit) liggen erop met een hairline en bijna geen schaduw */
    --canvas-portal: #f7f7f5; /* v5: portaal op hetzelfde papier als de admin */
    --surface: #ffffff; /* Wit — kaarten, rijen, sidebar, panelen */
    --surface-2: #f1f1ee; /* v5 zacht — tabelkop, hover, neutrale badge, sporen van meters */
    --sidebar-bg: #fbfbfa; /* v5: zijbalk een tint lichter dan het papier */
    --nav-active: #ffffff; /* v5 actieve navrij: een wit kaartje (met schaduw-1) op de zijbalk */
    --nav-hover: #f1f1ee;
    /* Pressed-staat: afgeleid van Mist + 5 % inkt (geen eigen hex in het plan). */
    --surface-pressed: color-mix(in srgb, var(--surface-2), var(--ink) 5%);

    /* --- Inkt (contrast: zie het plan; gemeten op wit/papier/mist) --- */
    --ink: #111315; /* v5 inkt: 18,62:1 wit · 17,36:1 papier */
    --ink-2: #5b6066; /* v5 grafiet: 6,34:1 wit · 5,61:1 op zacht */
    --ink-3: #6b7075; /* v5 gedempt: 5,00:1 wit · 4,66:1 papier · 4,42:1 zacht. Bewust donkerder dan de mockup (#8c9196, 2,96:1 op papier): kleine tekst moet leesbaar blijven */
    --ink-4: #8c9196; /* dimmed: 2.96:1 on paper. Only for a second, repeating value next to a label (a 0 count in a view chip), never the sole carrier of information */
    --ink-disabled: var(--line-strong); /* uitgeschakeld: van contrast vrijgesteld */

    /* --- Lijnen --- */
    --line: #e8e8e4; /* v5 hairline, 1px */
    --line-strong: #86868f; /* rand van echte bediening (checkbox, radio) — 3,61:1 op wit (non-tekst >= 3:1) */
    /* Geen-omlijsting (g1-no-outlines): bediening draagt een VLAK, geen kader. `--line-strong` blijft alleen
       voor wat functioneel een rand nodig heeft (checkbox, radio, tekstveld bij focus/fout). */
    --line-field: #dcdcd7; /* v5: rand van een tekstveld en van een outline-knop, één stap boven de hairline */
    --control-fill: var(--surface-2); /* secundaire knop, filter, pil: zichtbaar op wit én papier */
    --tag-color: var(--ink-3); /* default tag-badgekleur; een tag zet hem inline op zijn eigen kleur */
    --control-fill-hover: #ebebe7;
    --control-fill-active: #e3e3de;

    /* --- Lime-familie --- */
    --accent: #c7ff4a; /* markeerstift — nooit als tekst (1,18:1 op wit) */
    --accent-hover: #b9ef3d;
    --accent-pressed: #ade12f;
    --accent-ink: #1f2c10; /* tekst óp lime: 12,50:1 op lime · 13,35:1 op lime-zacht */
    --accent-deep: #7fb800; /* v5: lime die op wit nog een lijn draagt (gestippelde verwachting, live gesprek). Nooit tekst (2,40:1) */
    --accent-soft: #eef8d6; /* actieve bestemming, geselecteerde rij, "nu"-halo */
    --selection-ink: #111315; /* v4: tablijn, rail en focusring zijn inkt (neutraal); lime blijft een klein vlak */
    --brand-ink: #3f5a1e; /* donkergroen uit de lime-familie, voor tekst op --accent-soft waar het merk zichtbaar mag zijn */

    /* --- Mos & Nacht --- */
    --moss: #2e5a3b; /* charts, portaal-illustratie: 7,95:1 wit op mos */
    --night: #101512; /* bewust donker vlak: wit 18,45:1 · lime 15,67:1 · #aeb6af 8,88:1 */
    --night-2: #262c28;

    /* --- Status (fg op bg; fg op wit tussen haakjes in het plan) --- */
    --success: #15803d; /* v4 emerald: 4,79 op bg */
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;
    --warning: #b45309; /* v4 amber: 4,84 op bg */
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --danger: #b91c1c; /* v4 red: 5,91 op bg */
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-solid: #b91c1c; /* solide gevaarknop: wit op #b42318 = 6,57:1 */
    --info: #1d4ed8; /* v4 blue: 6,16 op bg */
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    /* neutraal = --ink-2 op --surface-2 (rand --line) */

    /* --- Focus: 2px ring met 2px vrije ruimte --- */
    --focus-ring-color: #71717a; /* v4: neutrale ring (shadcn), 4,83:1 op wit */
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring-color);

    /* --- Elevatie: hairline + vlakverschil voor alles dat ligt; drie
       schaduwen voor wat zweeft. Geen lichtgloed, geen kleurverloop. --- */
    --shadow-1: 0 1px 2px rgba(17, 19, 21, 0.04); /* v5: bijna niets — kaart, outline-knop, veld */
    --shadow-2: 0 4px 12px -2px rgba(17, 19, 21, 0.08), 0 1px 3px rgba(17, 19, 21, 0.05); /* popover, toast, menu */
    --shadow-3: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05); /* drawer, modal, palet */

    /* --- Charts --- */
    --chart-bar: #111315; /* v5: gesloten periodes in inkt */
    --chart-current: var(--accent); /* actuele periode */
    --chart-grid: var(--line);
    --chart-1: #111315;
    --chart-2: var(--info);
    --chart-3: var(--warning);
    --chart-4: var(--danger);
    --chart-5: #9da1a6;
    --chart-track: transparent; /* geen faux-balk bij waarde nul */

    /* --- Typografie ------------------------------------------------
       Drie families (next/font in app/layout.tsx). Bricolage Grotesque en
       Geist Mono hebben een EIGEN variabele (`--font-bricolage`,
       `--font-geist-mono`): de publieke site gebruikt `--font-display`
       (Inter Tight) en `--font-mono` (systeem) en mag niet veranderen.
       Alleen in deze scope wijzen `--font-display` en `--font-mono` naar
       de nieuwe letters.

       `--font-display` ALLEEN op `.fss-display`, `.admin-page-header h1`
       en `.admin-kpi-value` (zie base.css). Geist Mono voor identificerende
       codes (factuurnummer, kaartsleutel, domein, token, IBAN) — niet voor
       bedragen. */
    --font-sans: var(--font-inter), system-ui, sans-serif;
    --font-display: var(--font-inter-tight), var(--font-inter), system-ui, sans-serif; /* v5: Inter Tight voor koppen en grote cijfers (tracking -0,025 tot -0,03em) */
    --font-mono: var(--font-geist-mono), ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Schaal v1 (blijft; bestaande modules lezen deze). */
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    /* Schaal v2 (px / regelhoogte): display-xl 36/40 · display-lg 32/36 ·
       h1 28/32 · h2 20/28 · h3 16/24 · body 14/20 · body-lg 15/22 (portaal) ·
       small 13/18 · caption 12/16 · mono 13/20. Zinskapitalisatie; geen
       caps-reeksen; geen gewicht 700. */
    --text-display-xl: 36px;
    --lh-display-xl: 40px;
    --text-display-lg: 32px;
    --lh-display-lg: 36px;
    --text-h1: 28px;
    --lh-h1: 32px;
    --text-h2: 20px;
    --lh-h2: 28px;
    --text-h3: 16px;
    --lh-h3: 24px;
    --text-body: 14px;
    --lh-body: 20px;
    --text-body-lg: 15px;
    --lh-body-lg: 22px;
    --text-small: 13px;
    --lh-small: 18px;
    --text-caption: 12px;
    --lh-caption: 16px;
    --text-mono: 13px;
    --lh-mono: 20px;
    --leading-tight: 1.333; /* 24/32 */
    --leading-snug: 1.4;
    --leading-normal: 1.4286; /* 14/20 */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;

    /* --- Spacing: 4 8 12 16 20 24 32 40 48 64 --- */
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    /* Verticaal ritme: 24px tussen paginablokken, 16px tussen kaarten. */
    --stack: var(--space-6);
    --tabs-gap: var(--stack); /* gap between a page tab bar and the content below it (ui.css `.admin-tabs2[data-variant="page"]`) */
    --stack-cards: var(--space-4);
    /* Inside a card body: one gap between consecutive elements, slightly more before an action row. Between fields in a form: --field-gap. */
    --card-gap: var(--space-3);
    --card-gap-action: var(--space-4);
    --field-gap: var(--space-5);

    /* --- Radius: xs 4 (checkbox) · sm 6 (knop, veld, chip) · md 10 (kaart,
       tabel) · lg 14 (drawer, modal, sheet) · full --- */
    --radius-xs: 4px;
    --radius-sm: 10px; /* v5: knop, veld, chip */
    --radius-md: 16px; /* v5: kaart, tabel */
    --radius-lg: 20px; /* v5: drawer, modal, sheet */
    --radius-full: 999px;

    /* --- Shell-maten. Ongewijzigd t.o.v. v1; de v2-maten (sidebar 232,
       topbar 48, pagina-padding 24/16) zet taak 1.4 samen met de shell. --- */
    --badge-h: 24px;
    --sidebar-w: 224px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --content-max: 1440px;
    --page-pad: 32px;

    /* --- Z-index (bestaande volgorde) --- */
    --z-sticky: 90;
    --z-overlay: 100;
    --z-drawer: 110;
    --z-welcome: 120;
    --z-modal: 130;
    --z-skip: 200;
    --z-toast: 10100;
    --z-popover: 10250;
    --z-tooltip: 10300;

    /* --- Beweging --------------------------------------------------
       instant 80 (hover/pressed) · fast 140 (menu, chip, badge) · base 200
       (paginawissel, drawer-inhoud, toast) · slow 280 (drawer-paneel, modal,
       sheet) · story 600-900 (succesmoment, count-up). De springs
       (spring-soft/-pop) leven in framer-motion (`components/admin/ui/
       motion.ts`), niet in CSS. */
    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 200ms;
    --dur-slow: 280ms;
    --dur-story: 700ms;
    --ease-out: cubic-bezier(0.2, 0, 0, 1); /* binnenkomen */
    --ease-in: cubic-bezier(0.4, 0, 1, 1); /* weggaan */
    /* springSheet (stiffness 341, damping 32.5, mass 1) sampled as a linear() easing; 410 ms to rest. */
    --ease-spring-sheet: linear(0, 0.0312, 0.1066, 0.2051, 0.3123, 0.4187, 0.5184, 0.6082, 0.6866, 0.7535, 0.8093, 0.855, 0.8918, 0.9209, 0.9435, 0.9609, 0.9739, 0.9835, 0.9905, 0.9953, 0.9986, 1.0007, 1.002, 1.0027, 1.0029, 1.0029, 1.0028, 1.0025, 1);
    /* Portaal v3 (plan portaal-v3 §0.4): intekenen van lijnen/balken, stagger van kaarten en rijen, en de knoop die
       vult (klein doorschot, alleen op elementen <= 12 px). Alleen transform en opacity animeren ermee. */
    --dur-draw: 640ms;
    --stagger: 35ms;
    --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-knob: cubic-bezier(0.3, 1.25, 0.5, 1);

    /* =================================================================
       2. DICHTHEID — basiswaarden. Zonder `data-density` gelden de
       v1-maten ongewijzigd (zodat geen pagina verspringt in Golf 1);
       `[data-density]` hieronder overschrijft ze. Het attribuut zet taak
       1.4 (admin) / 1.5 (portaal) op `.admin-chrome` / `.portal-chrome`.
       ================================================================= */
    --control-sm: 32px; /* compacte icoonknop */
    --control-md: 36px; /* standaardknop, toolbarcontrol */
    --control-lg: 40px; /* formulierknop, invoerveld, navitem */
    --input-h: 40px;
    --input-h-sm: 36px;
    --row-h: 56px; /* tabelrij, één regel per cel */
    --row-h-sub: 64px; /* tabelrij mét subregel */
    --thead-h: 40px;
    --card-pad: 20px;
    --row-pad-y: 12px; /* verticale binnenmarge van een rij (tabelrij én rijenlijst): 32px inhoud + 2x12 = --row-h */
}

/* =====================================================================
   DICHTHEID (D9) — `[data-density]` op `.admin-chrome` / `.portal-chrome`
   (of op <html>; de tweede selector verslaat dan de scope hierboven). Elke maat staat hier expliciet: een custom property die
   op <html> via `var()` van een andere afhangt, volgt een override op een
   afstammeling NIET (de computed value is al op <html> vastgelegd).

   compact      rij 44 · veld 36 · knop 32/36 · kaart-padding 16
                (standaard admin-desktop)
   comfortable  rij 56 · veld 44 · knop 40/44 · kaart-padding 20
                (portaal en touch)
   ===================================================================== */
html[data-density="compact"],
[data-density="compact"] {
    --control-sm: 28px;
    --control-md: 32px;
    --control-lg: 36px;
    --input-h: 36px;
    --input-h-sm: 32px;
    --row-h: 44px;
    --row-h-sub: 52px;
    --thead-h: 36px;
    --card-pad: 16px;
    --row-pad-y: 6px;
    --badge-h: 22px; /* statusbadge c 22 / k 24 (plan: Design System v2) */
}

html[data-density="comfortable"],
[data-density="comfortable"] {
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 44px;
    --input-h: 44px;
    --input-h-sm: 40px;
    --row-h: 56px;
    --row-h-sub: 64px;
    --thead-h: 40px;
    --card-pad: 20px;
    --row-pad-y: 12px;
    --badge-h: 24px;
}