/* ============================================================================
   ProspectFlow, tokens voor de publieke pagina's (landing, blog, juridisch,
   foutpagina, offerte accepteren/afwijzen). Het :root-blok hieronder is
   byte-gelijk aan dat van dealdesk.css; tests/test_public_css.py bewaakt dat.
   Een klantpagina overschrijft alleen --acc op <body>; de afgeleide tinten
   volgen dan vanzelf. Pagina-eigen tokens (warme neutralen van de landing,
   maxw, radius) blijven in de pagina zelf.
   ========================================================================== */

:root {
  /* Accent: ProspectFlow-indigo, haalt AA als wit-op-accent. De percentages
     benaderen de eerder met de hand gekozen tinten (hover, licht, wash, ink). */
  --acc: #4f46e5;
  --acc-d: color-mix(in srgb, var(--acc) 85%, black);
  --acc-l: color-mix(in srgb, var(--acc) 65%, white);
  --acc-bg: color-mix(in srgb, var(--acc) 8%, white);
  --acc-ink: color-mix(in srgb, var(--acc) 70%, black);
  /* Enige tweede accent-literal naast --acc zelf: welke voorgrond op een --acc-vlak
     leesbaar is, hangt af van de luminantie en is niet met color-mix() af te leiden
     (geen luminantie-drempel in CSS). Python's theme_accent_contrast() (app/config.py)
     berekent hem per tenant-accent; _shell.html en de publieke klantpagina's zetten
     hem naast --acc op :root. Deze waarde is de default voor het standaardaccent. */
  --acc-contrast: #fff;
  --focus: var(--acc);

  /* Chrome — vast fundament */
  --sidebar: #0b0d12;
  --sidebar-2: #14161e;
  --sidebar-border: #22242e;
  --sidebar-text: #9698a6;

  --body: #f4f5f9;
  --surface: #ffffff;
  --ink: #0b0d12;
  --ink-2: #3f4250;
  /* WCAG AA: #676b7c ≈ 5.3:1 op wit (mockup-waarde, haalt 4.5:1). */
  --ink-3: #676b7c;
  --divider: #e4e7ef;
  /* --line: alias van --divider voor de publieke pagina's (legal, blog-admin)
     die public.css laden; landing en blog herdefiniëren hem met een eigen tint. */
  --line: #e4e7ef;
  --line-soft: #edeff5;
  /* --divider haalt maar 1.24:1 tegen wit: prima voor een decoratieve haarlijn,
     te weinig voor de rand van een bedienbaar element (WCAG 2.2 SC 1.4.11,
     >=3:1). --edge is uitsluitend voor interactieve randen (invoervelden,
     knoppen, chips); --divider blijft ongewijzigd voor scheidingslijnen. */
  --edge: #868b9c;

  /* Diepte & vorm (MOCKUP-tokens) */
  --shadow-card:
    0 1px 2px rgba(11, 13, 18, 0.05), 0 4px 16px -8px rgba(11, 13, 18, 0.1);
  --shadow-pop:
    0 2px 4px rgba(11, 13, 18, 0.06), 0 16px 40px -16px rgba(11, 13, 18, 0.22);
  --r-card: 16px;
  --r-ctl: 10px;

  /* Density — breedte-as (layout: gutters, kaartpadding, sectiegaps). Zie
     CSS_ARCHITECTURE.md "Desktop density contract": schaalt met
     schermbreedte, nooit met pointer:coarse. */
  --gut-x: 24px;
  --gut-y: 16px;
  --gut-b: 16px;
  --gap-sec: 14px;
  --pad-card: 12px 18px;
  --pad-panel: 14px 18px;
  --pad-modal: 14px 20px;

  /* Density — aanwijsapparaat-as (interactie: knop/rij/veldhoogte,
     topbarhoogte). Schaalt met pointer:coarse, nooit met schermbreedte. Een
     vaste --h-topbar (i.p.v. min-height + losse padding) maakt de
     gerenderde topbarhoogte een algebraïsch feit i.p.v. een optelsom. */
  --h-topbar: 48px;
  --pad-ctl: 6px 12px;
  --h-ctl: 32px;
  --pad-row: 7px 12px;
  --h-bar: 40px;
  --lh-ui: 1.4;

  --green: #0f9d58;
  --green-bg: #e7f7ee;
  --amber: #c77700;
  --amber-bg: #fdf3e0;
  --red: #d92d20;
  --red-bg: #feeceb;
  --blue: #1f6feb;
  --blue-bg: #e8f0fe;
  --purple: #7c3aed;
  --purple-bg: #f1eafe;

  /* Inkt op de lichte statusvlakken (--*-bg): haalt AA (>=4.5:1) waar de
     basiskleur zelf tekortschiet (bv. #1f6feb op #e8f0fe = 4.04:1). */
  --blue-ink: #1a5fd0;
  --green-ink: #0a7340;
  --red-ink: #c42317;
  --amber-ink: #9a5b00;
  --grey-ink: #5b5b66;
  --grey-bg: #f1f0ec;

  /* Tweede en derde oppervlak (rijhover, segmentachtergrond, meterbaan). */
  --surface-2: #f7f8fb;
  --surface-3: #eef1f6;
  --scroll-thumb: #d3d9e3;

  /* Type-schaal: elke font-size in dit bestand hoort op een van deze treden. */
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-2xl: 22px;
  --fs-display: 26px;

  /* Stapeling, laag voor laag: sticky koppen < verhoogde kaarten < menu's en
     bulkbalk < meldingswidget < copiloot-drawer < modals. */
  --z-sticky: 2;
  --z-raised: 10;
  --z-menu: 30;
  --z-widget: 40;
  --z-drawer: 60;
  --z-modal: 200;

  --shadow-focus: 0 0 0 3px var(--acc-bg);
  --shadow-modal:
    0 1px 2px rgba(16, 18, 40, 0.06), 0 24px 60px rgba(16, 18, 40, 0.28);
}