/* WaysBusiness — design-tokens: DE ENE BRON (vierde herreview 2026-09-15, belangrijk 3).
   Samengevoegd uit docs/design/channeliser-tokens.css (Claude Design) en de eerdere :root-blokken van
   styles.css (app/admin) en ways-site.css (publieke site). Alle vijf layouts en errors/_style.cfm
   laden dit bestand VOOR hun eigen stylesheet; styles.css en ways-site.css hebben geen :root meer.
   CssTokensTest borgt: precies een :root in het project, elke token een keer gedefinieerd EN elke token
   ergens gebruikt (zevende review 2026-09-16: dode aliassen zoals --sidebar-width bleven anders staan).
   Een token uit het design-bestand pas hier opnemen als hij gebruikt wordt.
   Wijzig een token HIER (en in het design-bestand), nergens anders. Geen webfont-import: fonts.css. */
:root {
  /* Brand & accent */
  --primary: #3D5AFE;
  --primary-hover: #2C47E0;
  --primary-light: #EEF1FF;
  --accent: #FF6B2B;
  --accent-deep: #C2410C;
  --accent-light: #FFF0E8;
  --accent-soft: #CA7652;

  /* Surfaces */
  --canvas: #FFFFFF;
  --soft: #F7F8FC;
  --surface-soft: #F7F8FC;
  --medium: #ECEEF5;
  --dark: #1A1F36;
  --surface-dark: #1A1F36;

  /* Borders */
  --hairline: #E1E4ED;
  --hairline-strong: #C8CCDB;
  --border-focus: #3D5AFE;

  /* Text */
  --ink: #0D1321;
  --body: #2D3455;
  --muted: #6B7280;
  --muted-soft: #626878;   /* was #9CA3AF (2,8:1) en #6D7380 (4,48:1 op --soft); AA op wit en op --soft (tiende review) */
  --on-primary: #FFFFFF;
  --on-dark: #E8EAF2;
  --on-dark-soft: rgba(232, 234, 242, 0.7);

  /* Alpha-tokens (twaalfde review 2026-09-20, kritiek 4): de ENIGE toegestane transparante kleuren. color-mix() en de
     rgba-vorm van een tokenwaarde zijn buiten dit bestand verboden (LintPatternsTest 6); CssTokensTest stelt het
     contrast van een alpha-token samen over zijn vlak (--dark voor de dark-familie, het paar-vlak voor tekst). */
  --dark-raise-1: rgba(255, 255, 255, 0.06);    /* hover/tegel op --dark */
  --dark-raise-2: rgba(255, 255, 255, 0.12);    /* actieve tegel, chip op --dark */
  --dark-raise-3: rgba(255, 255, 255, 0.25);    /* nadruk op --dark */
  --dark-line: rgba(255, 255, 255, 0.14);       /* hairline op --dark */
  --scrim: rgba(13, 19, 33, 0.55);              /* overlay onder drawer/menu/modal */
  --nav-glass: rgba(26, 31, 54, 0.95);          /* publieke navigatiebalk */
  --warning-glow: rgba(163, 71, 10, 0.45);
  --success-glow: rgba(4, 120, 87, 0.18);

  /* Semantic */
  --success: #047857;   /* was #059669 (3,8:1 op wit, 3,3:1 op --success-light); AA (negende review) */
  --success-light: #D1FAE5;
  --warning: #A3470A;   /* was #D97706 (2,9:1) en #B45309 (4,51:1 op --warning-light, marge 0,01); AA met marge (tiende review) */
  --warning-light: #FEF3C7;
  --error: #B91C1C;   /* was #DC2626 (4,0:1 op --error-light); AA */
  --error-light: #FEE2E2;
  --info: #0369A1;   /* was #0284C7 (4,1:1 op wit); AA */
  --info-light: #E0F2FE;

  /* Fonts */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, Menlo, monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 9999px;

  /* Elevation */
  --elev-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --elev-hover: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --elev-modal: 0 20px 60px rgba(0,0,0,.18);
  --elev-brand: 0 4px 14px rgba(61,90,254,.30);

  /* Transitions */
  --t-base: 150ms ease;
  --t-slow: 200ms ease-out;

  /* Layout */
  --sidebar-w: 248px;   /* project: 248px; het design-bestand houdt 240px (--sidebar-width): bewuste afwijking, zie --content-max */
  --nav-h: 64px;
  --sess-banner-h: 0px;   /* csrf.js zet de hoogte van de sessie-verlopen-banner; body/toast/drawer schuiven mee (twaalfde review, belangrijk 12) */

}