/* ============================================================
   VSVB Solutions — Design Tokens
   Bron: Huisstijlhandboek v1.0 (april 2026)
   Scope: interne CRM (vsvb-interne-tool)

   REGEL: geen enkele kleur, radius, schaduw of fontgrootte
   elders in de codebase hardcoderen. Alles verwijst hiernaar.
   ============================================================ */

:root {

  /* ---------- 1. PRIMAIRE KLEUREN (handboek 3.1) ---------- */
  --dark:        #1B2A3B;   /* Dark Navy  - koppen, sidebar, donkere vlakken */
  --ice:         #4A9FD4;   /* Ice Blue   - accent: links, knoppen, iconen   */
  --mid:         #2E6DA4;   /* Mid Blue   - hover states, subkoppen          */

  /* ---------- 2. SECUNDAIR & FUNCTIONEEL (handboek 3.2) ---------- */
  --grey:        #F4F6F9;   /* Light Grey     - app-achtergrond, inputs */
  --ice-bg:      #EBF3FA;   /* Ice Background - getinte vlakken         */
  --text:        #5A6474;   /* Text Grey      - bodytekst               */
  --border:      #DDE3EB;   /* Border Grey    - randen, scheidingslijnen*/
  --white:       #FFFFFF;
  --wa:          #25D366;   /* WhatsApp Green - UITSLUITEND WhatsApp    */

  /* Uit de typografische hiërarchie (handboek 4.3) en tints van het palet */
  --text-muted:  #9CA3AF;   /* small / caption, handboek 4.3 */
  --ice-tint-10: rgba(74, 159, 212, 0.10);
  --ice-tint-14: rgba(74, 159, 212, 0.14);
  --ice-tint-22: rgba(74, 159, 212, 0.22);

  /* ---------- 3. STATUSKLEUREN — TER GOEDKEURING ----------
     Niet in het handboek. Een CRM heeft ze functioneel nodig
     (Betaald / Vervallen / In behandeling). Gedempt gehouden zodat
     Ice Blue het enige echte accent blijft. Elk paar haalt WCAG AA
     als donkere tekst op de bijbehorende tint.
     Bente: keuren of vervangen, daarna deze comment verwijderen.
     -------------------------------------------------------- */
  --ok:          #2E9E6B;   --ok-bg:     #E8F5EF;   --ok-text:     #1F7A52;
  --warn:        #D9822B;   --warn-bg:   #FBF1E3;   --warn-text:   #8A5A12;
  --danger:      #CC4B37;   --danger-bg: #FBEAE7;   --danger-text: #A33526;
  /* Info-status hergebruikt het palet: --ice-bg + --mid als tekst */
  --info-bg:     var(--ice-bg);   --info-text: var(--mid);

  /* ---------- 4. GRADIËNTEN (handboek 3.3) ---------- */
  --grad-primary:  linear-gradient(135deg, #2E6DA4, #4A9FD4);
  --grad-line:     linear-gradient(90deg, #4A9FD4, #2E6DA4);
  --grad-surface:  linear-gradient(135deg, #F4F6F9 0%, #EBF3FA 45%, #FFFFFF 100%);
  --grad-dark:     linear-gradient(135deg, #1B2A3B 0%, #243d55 55%, #2E6DA4 100%);
  --grad-dark-v:   linear-gradient(180deg, #1B2A3B 0%, #243d55 55%, #2E6DA4 100%);

  /* ---------- 5. TYPOGRAFIE (handboek 4) ---------- */
  --font-display: 'Inter', Helvetica, Arial, sans-serif;    /* koppen, cijfers, nav */
  --font-body:    'DM Sans', Helvetica, Arial, sans-serif;  /* body, knoppen, forms */

  --track-heading: -0.02em;   /* letter-spacing koppen    */
  --track-sub:     -0.01em;   /* letter-spacing subkoppen */
  --track-label:    0.14em;   /* uppercase sectielabels   */

  --lh-body:  1.65;   /* handboek minimum */
  --lh-tight: 1.35;   /* tabellen, dichte UI */

  /* App-schaal. Wijkt bewust af van de marketingschaal in het
     handboek: een CRM is dicht, geen hero. Fonts, gewichten en
     letter-spacing blijven wel exact volgens handboek.
     Ondergrens 0.875rem = 14px, conform handboek 4.4. */
  --fs-page-title: 1.25rem;    /* topbar, sectiekop      */
  --fs-card-title: 1.05rem;    /* = H4 handboek          */
  --fs-kpi:        1.75rem;    /* KPI-cijfers, Inter 700 */
  --fs-body:       0.9375rem;  /* 15px                   */
  --fs-ui:         0.875rem;   /* 14px, tabellen, labels */
  --fs-small:      0.8125rem;  /* 13px, captions, meta   */

  /* ---------- 6. RADIUS (handboek 5.1) ---------- */
  --r-card:   14px;
  --r-btn:     8px;
  --r-input:   8px;
  --r-badge:   6px;
  --r-pill:  100px;
  --r-icon:   12px;
  --r-modal:  18px;
  --r-avatar: 50%;

  /* ---------- 7. SCHADUWEN (handboek 5.2) ---------- */
  --sh-card:     0 2px 14px rgba(27, 42, 59, 0.06);
  --sh-hover:    0 12px 40px rgba(27, 42, 59, 0.10);
  --sh-elevated: 0 4px 22px rgba(27, 42, 59, 0.07);
  --sh-btn:      0 8px 24px rgba(74, 159, 212, 0.35);
  --sh-modal:    0 20px 60px rgba(27, 42, 59, 0.3);
  --sh-drawer:  -10px 0 40px rgba(27, 42, 59, 0.18);
  --sh-btn-wa:     0 8px 24px rgba(37, 211, 102, 0.35);
  --sh-btn-ok:     0 8px 24px rgba(46, 158, 107, 0.35);
  --sh-btn-danger: 0 8px 24px rgba(204, 75, 55, 0.35);

  /* ---------- 8. SPACING (4px basis) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;

  /* ---------- 9. MOTION (handboek 5.4) ---------- */
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;   /* handboek-standaard voor knoppen */

  /* ---------- 10. LAYOUT ---------- */
  --sidebar-w:  248px;
  --topbar-h:    60px;
  --focus-ring: 0 0 0 3px var(--ice-tint-22);
}

/* ---------- BREAKPOINTS (gelijk aan website, handboek 7.1) ----------
   480px / 560px / 768px / 900px. Custom properties werken niet in
   media queries, dus deze staan als comment ter referentie.
   CRM-specifiek:
     < 900px : sidebar klapt in tot iconenbalk
     < 768px : tabellen worden cards, filterrij stapelt
     < 560px : modals full-screen
   ------------------------------------------------------------------- */