/* ===========================================================
   SER huisstijl — gedeelde design-tokens (Tools + Analytics)
   ===========================================================
   Dit bestand staat BYTE-GELIJK in twee repos:
     ser-automation-platform/huisstijl.css
     ser-analytics-platform/frontend/huisstijl.css
   Een test in beide repos vergelijkt de kopie met de andere repo als die
   lokaal ernaast staat. Wijzig je hier iets: kopieer het bestand naar de
   andere repo in dezelfde wijziging. Uitleg: docs/huisstijl.md.

   Alleen custom properties op :root — geen selectors die content raken.
   Componenten (knoppen, kaarten, rail, …) staan in styles.css van elke app
   en gebruiken deze tokens.
   =========================================================== */

:root {
  /* ── Merk ─────────────────────────────────────────────────── */
  --ser-teal: #00b4a0;
  --ser-teal-600: #00a092;
  --ser-teal-700: #019289;      /* teal voor tekst/lijnen op wit (contrast) */
  --ser-teal-900: #00534c;
  --ser-teal-50: #e6f7f5;
  --ser-navy: #1e1e5a;
  --ser-navy-700: #16164a;
  --ser-navy-900: #0e0e3a;
  --ser-gold: #f5a523;
  --ser-gold-50: #fff5e0;
  --ser-paars: #7c5cff;         /* AI / Analytics-accent */
  --ser-paars-licht: #c4b5fd;   /* paars op donkere achtergrond */
  --ser-paars-50: #f0eeff;

  /* ── Neutralen (koel getint) ──────────────────────────────── */
  --ink-900: #0e0e2a;
  --ink-800: #1a1a38;           /* 16.8:1 op wit */
  --ink-700: #2a2a4a;
  --ink-600: #44476a;           /* 8.9:1 op wit; tussen ink-700 en ink-500 */
  --ink-500: #5a5e7a;
  --ink-400: #7e8298;
  --ink-300: #a8acc0;
  --ink-200: #d8dae6;
  --ink-150: #e1e3ed;           /* kaartranden, tussen ink-200 en ink-100 */
  --ink-100: #ebedf3;
  --ink-50:  #f4f5f9;
  --ink-25:  #fafbfd;
  --paper:   #ffffff;

  /* Aliassen die bestaande code gebruikt (tools page-tool.jsx e.a.). */
  --border:     var(--ink-200);
  --bg:         var(--paper);
  --bg-subtle:  var(--ink-50);
  --line:       #e6e8f0;        /* haarlijnen (menu's, scheidingen) */
  --panel:      var(--paper);
  --card:       var(--paper);
  --muted:      var(--ink-500); /* 6.3:1 op wit */

  /* ── Semantisch ───────────────────────────────────────────── */
  /* Vlak/markering. Voor tekst op wit de -tekst-variant (contrast ≥ 4.5:1). */
  --ok:   #00b4a0;
  --warn: #f5a523;
  --err:  #e53935;
  --bad:  var(--err);
  --info: #2563eb;
  /* Contrast op wit (ink-50 / bad-bg): ok 5.6 (5.1 / 4.9), warn 5.8 (5.1 / 5.3),
     bad 6.5 (6.0 / 5.7), err 5.6 (5.2 / 4.9), info 7.3 — allemaal ≥ 4.5:1 (WCAG AA). */
  --ok-tekst:   #00756a;
  --good-tekst: var(--ok-tekst);
  --warn-tekst: #8a5c00;
  --bad-tekst:  #b4232a;
  --err-tekst:  #c62828;
  /* Foutkleur voor tekst op donkere vlakken (rail, tooltips): 9.0:1 op navy-900, 9.2:1 op ink-900. */
  --err-tekst-op-donker: #ff9a95;
  --info-tekst: #1e4fb8;
  --ok-bg:   var(--ser-teal-50);
  --warn-bg: var(--ser-gold-50);
  --bad-bg:  #fdecea;
  --info-bg: #eaf1fe;

  /* "Eigen" = de klant zelf / ons eigen domein, tegenover concurrenten of
     de markt. Altijd SER-teal; nooit voor een andere serie gebruiken. */
  --accent-eigen: var(--ser-teal-700);
  --accent-eigen-zacht: #94cac4;

  /* ── Specialismen (tools-categorieën, pills) ──────────────── */
  --spec-seo:     #00b4a0;
  --spec-sea:     #f5a523;
  --spec-content: #7c5cff;
  --spec-data:    #2563eb;
  --spec-ai:      #ec4899;
  --spec-cro:     #eb6834;
  --spec-serapps: #64748b;

  /* ── Platforms (topbar-wissel Tools / Analytics / Planning) ── */
  --platform-tools:     var(--ser-gold);
  --platform-analytics: var(--ser-paars);
  --platform-planning:  #2563eb;

  /* ── Grafiekpalet ─────────────────────────────────────────── */
  /* Categorisch, in VASTE volgorde toewijzen (nooit rouleren); kleur volgt
     de entiteit, niet de rang. Gevalideerd op kleurenblindheid (CVD ΔE ≥ 8
     tussen buren) tegen wit. --chart-1 is altijd "eigen" (SER-teal).
     --chart-4 (geel) en --chart-5 (roze) halen < 3:1 op wit: altijd met
     label of tabel ernaast. Een 9e serie wordt "Overig". */
  --chart-1: #019289;   /* eigen */
  --chart-2: #eb6834;
  --chart-3: #2a78d6;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #8c6d1f;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;
  /* Kanaal "Zoeken betaald, merk" krijgt een eigen donker petrol (7.3:1 op wit,
     ΔE ≥ 17 t.o.v. alle chart-kleuren, ook onder CVD) zodat het niet met
     "eigen" (--chart-1) verward wordt. Alleen voor die kanaalserie. */
  --kanaal-sea-merk: #005f73;
  --chart-eigen: var(--chart-1);
  --chart-overig: var(--ink-300);
  /* Sequentieel (één tint, licht → donker) voor grootte/volume. */
  --chart-seq-1: #94cac4;
  --chart-seq-2: #019289;
  --chart-seq-3: #00534c;
  /* Richting: stijging/daling (watervallen, delta's). */
  --chart-plus: var(--ser-teal);
  --chart-min:  var(--err);
  /* Hulplijnen en tekst in grafieken: tekst draagt nooit de seriekleur. */
  --chart-vorige: var(--ink-300);   /* vergelijkingsperiode, gestippeld */
  --chart-as:     var(--ink-200);
  --chart-label:  var(--ink-700);
  --chart-label-zacht: var(--ink-400);
  --chart-anker:  var(--ser-navy);

  /* ── Typografie ───────────────────────────────────────────── */
  --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --fs-2xs: 9px;    /* rail-kopjes, micro-labels */
  --fs-xs:  11px;   /* labels in hoofdletters, voetnoten */
  --fs-sm:  12px;   /* knoppen, pills, tabel-koppen */
  --fs-md:  13px;   /* standaard UI-tekst, tabellen */
  --fs-base: 14px;  /* lopende tekst */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;   /* KPI-waarde */
  --fs-3xl: 32px;   /* paginatitel */
  --fw-normaal: 400;
  --fw-medium: 500;
  --fw-halfvet: 600;
  --fw-vet: 700;
  --lh-strak: 1.2;
  --lh-normaal: 1.5;

  /* ── Radius ───────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-kaart: 12px;  /* panels/kaarten */
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Schaduwen ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(14,14,42,0.04), 0 1px 1px rgba(14,14,42,0.03);
  --shadow-md: 0 4px 14px rgba(14,14,42,0.06), 0 2px 4px rgba(14,14,42,0.04);
  --shadow-lg: 0 12px 32px rgba(14,14,42,0.10), 0 4px 8px rgba(14,14,42,0.04);
  --shadow-glow: 0 0 0 4px rgba(0,180,160,0.12);

  /* ── Spacing (4px-raster) ─────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Focus ────────────────────────────────────────────────── */
  --focus-kleur: var(--ser-teal);
  --focus-outline: 2px solid var(--focus-kleur);
  --focus-offset: 2px;
  --focus-ring: var(--shadow-glow);

  /* ── App-shell ────────────────────────────────────────────── */
  --rail-breedte: 232px;
  --rail-bg: var(--ser-navy-900);
  --rail-bg-verloop: linear-gradient(180deg, #0a0a2e 0%, var(--ser-navy) 100%);
  --rail-lijn: rgba(255,255,255,0.08);
  --rail-tekst: rgba(255,255,255,0.72);
  --rail-tekst-zacht: rgba(255,255,255,0.55);
  --rail-tekst-uit: rgba(255,255,255,0.32);
  --rail-hover-bg: rgba(255,255,255,0.05);
  --rail-actief-bg: rgba(124,92,255,0.18);
  --rail-actief-ico: var(--ser-paars-licht);
  --rail-logo-hoogte: 36px;
  --topbar-hoogte: 60px;
}