/* ============================================================================
   BURGERZAKEN AI — Design System foundations  ·  Brandbook V4  ·  burgerzaken.ai
   "Functioneel, precies en Burgerzaken-eigen."
   Vraag › bron › vervolgstap.   Oranje stuurt · blauw draagt.
   Vormtaal: rechte hoeken (NVVB / overheids-formulier, rectilineair).

   Burgerzaken AI is het platform; de Assistent is het eerste product.
   This file is the single source of truth for color + type tokens.
   Brand source: Brandbook V4 — see assets/brand/.
   Fonts: Bricolage Grotesque (koppen) · Hanken Grotesk (body/labels) · IBM
   Plex Mono (identifier "data-laag": BWB / ECLI / BSN-maskers).
   Self-hosted (woff2, latin + latin-ext) in fonts/ — works offline. Load via:

   <link rel="stylesheet" href="fonts/fonts.css">

   (adjust the relative path to fonts/fonts.css from your file's location).
   ============================================================================ */

:root {
  /* ---- 1. BRAND CORE (exact brandbook hex) ----------------------------- */
  --primair-blauw: #0B3D66;   /* vertrouwen & autoriteit — primary actions, koppen */
  --lichtblauw:    #59B4E6;   /* helderheid & structuur — secondary, highlights   */
  --accent-oranje: #F28C2A;   /* functioneel accent — sturen, niet schreeuwen     */
  --licht-veld:    #F7F6F2;   /* warme neutrale vlakte — app-achtergrond, rust    */
  --tekstkleur:    #1F2A37;   /* primaire tekst                                   */

  /* ---- 2. BLUE RAMP (from primair blauw) ------------------------------- */
  --blue-900: #08294A;
  --blue-800: #0B3D66;        /* = primair blauw */
  --blue-700: #134E7E;
  --blue-600: #1E6299;
  --blue-500: #2C7AB5;
  --blue-400: #59B4E6;        /* = lichtblauw */
  --blue-300: #8FCDEF;
  --blue-200: #C2E2F6;
  --blue-100: #E4F1FB;
  --blue-050: #F1F8FD;

  /* ---- 3. ORANGE RAMP (from accent oranje) ----------------------------- */
  --orange-700: #B5631A;
  --orange-600: #D9761F;
  --orange-500: #F28C2A;      /* = accent oranje */
  --orange-400: #F7A856;
  --orange-200: #FBD3A3;
  --orange-100: #FCE8CF;
  --orange-050: #FDF4E8;

  /* ---- 4. NEUTRALS — cool slate on a warm field ------------------------ */
  --ink-900: #1F2A37;         /* = tekstkleur — primary text (13.8:1 on field) */
  --ink-700: #3B4654;         /* secondary text                 (8.9:1)        */
  --ink-500: #5C6776;         /* muted / captions (min body)    (5.0:1)        */
  --ink-400: #818B98;         /* placeholder / disabled                        */

  --field:      #F7F6F2;      /* = licht veld — app background */
  --field-sunk: #F0EFEA;      /* sidebar / sunken zones        */
  --surface:    #FFFFFF;      /* cards, composer, panels       */
  --surface-2:  #FBFAF7;      /* subtly raised within a card   */

  --line:        #E4E2DC;     /* hairline rule on field        */
  --line-strong: #D2D0C9;     /* stronger divider / input border */
  --line-blue:   #C2E2F6;     /* tinted rule inside blue washes  */

  /* ---- 5. SEMANTIC — brand-mapped ------------------------------------- */
  --primary:        var(--primair-blauw);
  --primary-hover:  #0E4775;
  --primary-press:  #08294A;
  --primary-wash:   var(--blue-050);
  --primary-line:   var(--blue-200);
  --on-primary:     #FFFFFF;

  --secondary:      var(--lichtblauw);
  --secondary-wash: var(--blue-100);

  /* ORANJE STUURT, BLAUW DRAAGT — orange (--accent) carries attention to the
     single next action (CTA's, vervolgstap, focus-emfase); blue (--primary)
     carries authority & structure (merk, nav, in-app primaire knoppen).
     One orange CTA per screen; never two competing oranges. */
  --accent:         var(--accent-oranje);
  --accent-hover:   var(--orange-600);
  --accent-wash:    var(--orange-050);
  --accent-line:    var(--orange-200);
  --on-accent:      #FFFFFF;

  --link:           #1763A0;  /* readable blue link on white (4.9:1) */

  /* ---- 6. STATUS — functional, NEVER color-alone (pair with label+icon) */
  --ok:        #1F8A5B;       /* gegrond / zeker  */
  --ok-wash:   #E8F5EE;
  --ok-line:   #BFE3D0;
  --warn:      #C16A12;       /* let op — readable text-grade orange (4.6:1) */
  --warn-accent: var(--accent-oranje); /* fills/strips use brand orange — @kind color */
  --warn-wash: #FDF1E0;
  --warn-line: #F6D6A8;
  --alert:     #C0322B;       /* conflict / strijdig */
  --alert-wash:#FBEAE8;
  --alert-line:#F1C4C0;
  --neutral-status: var(--ink-500); /* onvoldoende dekking / onbekend */

  /* ---- 7. EVIDENCE LAYERS — dossier provenance (kept in blue family) --- */
  --layer-procedure: #0B3D66; /* Handboek / HBA-procedure  */
  --layer-wet:       #1E6299; /* bindende wet / BWB         */
  --layer-rechtspraak:#5A6B7B;/* jurisprudentie / ECLI      */

  /* ---- 8. TYPE FAMILIES ----------------------------------------------- */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* @kind font */
  --f-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;    /* @kind font */
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* @kind font */

  /* ---- 9. TYPE SCALE (semantic) --------------------------------------- */
  /* display / koppen — Space Grotesk 600 */
  --display-xl: 600 44px/1.06 var(--f-display); --display-xl-ls: -0.02em;
  --h1: 600 34px/1.12 var(--f-display);   --h1-ls: -0.018em;
  --h2: 600 26px/1.20 var(--f-display);   --h2-ls: -0.012em;
  --h3: 600 20px/1.30 var(--f-display);   --h3-ls: -0.006em;
  --h4: 600 17px/1.35 var(--f-display);   --h4-ls: 0; /* @kind other */
  /* body — Inter */
  --lede:    400 18px/1.6  var(--f-body);
  --body:    400 16px/1.6  var(--f-body);
  --body-sm: 400 14px/1.55 var(--f-body);
  --caption: 400 12.5px/1.45 var(--f-body);
  /* labels — Inter 500 / caps */
  --label:      500 14px/1.4 var(--f-body);   --label-ls: 0; /* @kind other */
  --label-caps: 600 11.5px/1.4 var(--f-body); --label-caps-ls: 0.08em;
  /* identifiers — IBM Plex Mono */
  --mono:    500 13px/1.5 var(--f-mono);    --mono-ls: 0.01em;
  --mono-sm: 500 11px/1.4 var(--f-mono);    --mono-sm-ls: 0.03em;

  /* ---- 10. SPACING — 8pt grid ----------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* ---- 11. RADII — NVVB-vormtaal: rechte hoeken (rectilineair) --------
     Burgerzaken AI V4 zet de hoeken op 0. Het systeem leest als een
     overheids-formulier / dossier-akte: vlakken, lijnen, geen ronding.
     --r-pill blijft 999px maar ALLEEN voor echte cirkels (avatars,
     status-dots, spinners) — nooit voor knoppen, chips of segmenten. */
  --r-xs: 0;    /* @kind radius */
  --r-sm: 0;    /* @kind radius */
  --r-md: 0;    /* @kind radius */
  --r-lg: 0;    /* @kind radius */
  --r-card: 0;  /* @kind radius */
  --r-pill: 999px; /* @kind radius */

  /* ---- 12. ELEVATION — flat dossier; structural outlines preferred ---- */
  --sh-sm: 0 1px 2px rgba(11, 61, 102, 0.06);
  --sh-md: 0 6px 18px rgba(11, 61, 102, 0.08);
  --sh-lg: 0 18px 44px rgba(11, 61, 102, 0.12);
  --sh-focus: 0 0 0 3px rgba(89, 180, 230, 0.45); /* lichtblauw focus ring */

  /* ---- 13. LAYOUT ----------------------------------------------------- */
  --container-max: 1280px;
  --rail: 760px;   /* reading rail width */
  --gutter: 24px;

  --dur-fast: 130ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 240ms; /* @kind other */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt-in via .bza-type scope so this file can be
   dropped next to product CSS without hijacking it.
   ============================================================================ */
.bza-type, .bza-root {
  font: var(--body);
  color: var(--ink-900);
  background: var(--field);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bza-type h1, .h1 { font: var(--h1); letter-spacing: var(--h1-ls); color: var(--ink-900); margin: 0 0 var(--s4); text-wrap: balance; }
.bza-type h2, .h2 { font: var(--h2); letter-spacing: var(--h2-ls); color: var(--ink-900); margin: 0 0 var(--s3); }
.bza-type h3, .h3 { font: var(--h3); letter-spacing: var(--h3-ls); color: var(--ink-900); margin: 0 0 var(--s2); }
.bza-type h4, .h4 { font: var(--h4); color: var(--ink-900); margin: 0 0 var(--s2); }
.bza-type p,  .p  { font: var(--body); color: var(--ink-700); margin: 0 0 var(--s3); text-wrap: pretty; }
.lede   { font: var(--lede); color: var(--ink-700); }
.caption{ font: var(--caption); color: var(--ink-500); }
.label-caps { font: var(--label-caps); letter-spacing: var(--label-caps-ls); text-transform: uppercase; color: var(--ink-500); }
.mono   { font: var(--mono); letter-spacing: var(--mono-ls); }
.bza-type a, .link { color: var(--link); text-underline-offset: 2px; text-decoration-color: var(--blue-200); }
.bza-type a:hover, .link:hover { text-decoration-color: currentColor; }
.bza-type code, .ident {
  font: var(--mono); letter-spacing: var(--mono-ls);
  background: var(--field-sunk); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 1px 6px; color: var(--ink-900);
}