/* -----------------------------------------------------------------------------
   OVERGENOMEN BESTAND — NIET HIER WIJZIGEN.

   Coen Design System v2.1, bestand tokens.css?v=7
   Bron:      Jugoo Dash, http://18.157.134.137:8090/css/ds/tokens.css
   Opgehaald: 2 september 2026

   Moet hier iets veranderen, pas het dan in de bron aan en haal dit bestand
   opnieuw op. Wijzig je het hier, dan is de volgende vergelijking met de bron
   niet meer te lezen.

   Wat het design-system mist, staat in aanvulling.css ernaast.
   ----------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════
   Coen Design System — Tokens (v2)
   Versie 2.1 — gebaseerd op Jugoo (PostAds), GA4-stijl, Geist font
   Laad dit bestand vóór base.css en components.css.

   Designprincipes (zie PRINCIPLES.md):
   - Warme cremé-achtergrond (#F4F2F0) i.p.v. koud wit
   - Google-stijl blauw als primair accent
   - Geist (Vercel) als hoofdfont op alle applicaties
   - Subtiele schaduwen, ruime spacing scale (4px-base)
   - GA4-stijl tekst-hiërarchie, Material Symbols Rounded iconen
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrale tinten ────────────────────────────────────────── */
  --creme:        #F4F2F0;   /* Warm off-white — primaire pagina-achtergrond */
  --creme-dark:   #E8E0D8;
  --wit:          #FFFFFF;
  --zwart:        #000000;
  --grijs:        #4A4A4A;
  --grijs-licht:  #8A8A8A;
  --grijs-50:     #F4F2F0;
  --grijs-100:    #eeeeee;
  --grijs-200:    #dddddd;
  --grijs-300:    #bbbbbb;
  --grijs-400:    #888888;
  --grijs-500:    #666666;
  --grijs-700:    #333333;

  /* ── Tekst-hiërarchie (GA4-stijl) ──────────────────────────── */
  --text-primary:   #0a0a0a;   /* Hoofdtekst, koppen — Jugoo CMS "hard black" */
  --text-default:   #3C4043;   /* Body */
  --text-secondary: #5F6368;   /* Secundair, labels */
  --text-tertiary:  #80868B;   /* Subtiel, meta-info */
  --text-disabled:  #9AA0A6;

  /* ── Accent-kleuren ────────────────────────────────────────── */
  --oranje:        #E87C2A;    /* Warm accent (PostAds-orange) */
  --oranje-hover:  #D06B1F;
  --accent:        #1A73E8;    /* Primair Google-blauw — knoppen, links, active */
  --accent-hover:  #1557B0;
  --accent-light:  #E8F0FE;

  /* ── Status-kleuren ────────────────────────────────────────── */
  --groen:         #7CB77B;
  --groen-light:   #e8f5e8;
  --groen-action:  #16a34a;   /* Donkergroen — knoppen die iets nieuws aanmaken */
  --groen-action-hover: #15803d;
  --geel:          #E8B84A;
  --geel-light:    #fdf6e3;
  --rood:          #D4633A;
  --rood-light:    #fde8e2;

  /* ── Surfaces / structuur ──────────────────────────────────── */
  --app-bg:        #F4F2F0;   /* Page achtergrond */
  --surface-alt:   #F4F2F0;   /* Alternerende rijen */
  --divider-soft:  #E8EAED;   /* Subtiele scheidingslijnen */

  /* ── Sidebar (GA4-stijl) ───────────────────────────────────── */
  --sidebar-width:        240px;
  --sidebar-bg:           #FFFFFF;
  --sidebar-text:         #212832;   /* Inactieve menu-items — Jugoo CMS hard text */
  --sidebar-text-active:  #0061f2;   /* Hover/actief — Jugoo CMS blauw */
  --sidebar-icon:         #1f2933;   /* Inactieve icon-kleur (dark, niet grijs) */
  --sidebar-icon-active:  #0061f2;
  --sidebar-hover:        #F4F2F0;
  --sidebar-active:       #E8F0FE;
  --sidebar-border:       #E8EAED;

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     12px;

  /* ── Schaduwen ─────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow:        0 2px 8px rgba(0,0,0,0.1);
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.12);
  --shadow-ga4:    0 1px 2px rgba(60,64,67,0.1), 0 1px 3px rgba(60,64,67,0.05);

  /* ── Typografie ────────────────────────────────────────────── */
  --font-family:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono:     'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --fs-xs:         0.7rem;     /* 11.2px — badges, pills, meta-info */
  --fs-sm:         0.875rem;   /* 14px   — body, knoppen, inputs */
  --fs-md:         1rem;       /* 16px   — sub-titels */
  --fs-h4:         1rem;       /* 16px   — h4 */
  --fs-h3:         1.125rem;   /* 18px   — h3 */
  --fs-h2:         1.375rem;   /* 22px   — h2 */
  --fs-h1:         1.75rem;    /* 28px   — h1 */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;

  /* ── Spacing scale (4px-base) ──────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;

  /* ── Transities ────────────────────────────────────────────── */
  --transition:        0.2s ease;
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;

  /* ── Surfaces (bg-lagen) ───────────────────────────────────── */
  --surface:         #FFFFFF;   /* Card-achtergrond */
  --surface-subtle:  #FAF7F2;   /* Iets warmer dan creme — alt-blokken in een card */
  --surface-sunken:  #EEEAE3;   /* Verzonken / disabled / track */

  /* ── Borders (MijnCRM-style kaders rondom kaarten) ─────────── */
  --border-subtle:   #E8EAED;   /* Standaard kaart-border, identiek aan --divider-soft */
  --border-strong:   #DADCE0;   /* Hover/active emphasis op kaarten */

  /* ── Text-rol aanvullingen ─────────────────────────────────── */
  --text-muted:      #80868B;   /* Subtiel — alias --text-tertiary */
  --text-accent:     #1A73E8;   /* Link-tekst — alias --accent */
  --text-inverse:    #FFFFFF;   /* Tekst op donkere achtergrond */

  /* ── Status-paren (badge/alert/pill) ───────────────────────── */
  --bg-success:      #e8f5e8;  --fg-success: #1e7a36;
  --bg-warning:      #fdf6e3;  --fg-warning: #8a6914;
  --bg-info:         #E8F0FE;  --fg-info:    #1557B0;
  --bg-danger:       #fde8e2;  --fg-danger:  #b8522e;

  /* ── Tints voor alert-borders ──────────────────────────────── */
  --blue-100:        #D2E3FC;
  --green-100:       #C8E6CB;
  --amber-100:       #FCE8B2;

  /* ── Danger als losse status ───────────────────────────────── */
  --danger:          #D4633A;   /* Alias --rood */

  /* ── Selection ─────────────────────────────────────────────── */
  --accent-100:      #E8F0FE;

  /* ── Component-maten ───────────────────────────────────────── */
  --h-btn:           36px;
  --h-btn-sm:        28px;
  --h-btn-md:        36px;
  --h-btn-lg:        44px;
  --radius-btn:      8px;       /* alias --radius */
  --radius-card:     8px;       /* alias --radius */
  --radius-input:    8px;       /* alias --radius */
  --radius-badge:    4px;       /* alias --radius-sm */
  --h-input:         36px;      /* gelijk aan --h-btn-md */

  /* ── Z-index-schaal ────────────────────────────────────────── */
  --z-sidebar:       100;
  --z-dropdown:      200;
  --z-modal:         300;
  --z-toast:         400;
  --z-tooltip:       500;

  /* ── Focus / lijnhoogtes ───────────────────────────────────── */
  --focus-ring:      0 0 0 3px rgba(26, 115, 232, 0.25);
  --lh-tight:        1.25;
  --lh-normal:       1.5;
  --lh-relaxed:      1.65;   /* lopende tekst die gelezen wordt: lead, prose */

  /* ── Font alias (voor base.css refs) ───────────────────────── */
  --font:            var(--font-family);

  /* ── Extra typografie ──────────────────────────────────────── */
  --fs-lg:           1.125rem;  /* alias --fs-h3 */
  --fs-2xl:          1.75rem;   /* alias --fs-h1 */

  /* ── Shadow medium ─────────────────────────────────────────── */
  --shadow-md:       0 2px 8px rgba(0,0,0,0.08);

  /* ── Glass (optioneel — voor apps met gradient-achtergrond) ── */
  --glass-bg:        rgba(255,255,255,0.7);
  --glass-border:    rgba(255,255,255,0.35);
  --glass-blur:      20px;
  --glass-shadow:    0 8px 32px rgba(0,0,0,0.08);
}