/* ============================================================================
   David Analytics Component Library — DESIGN TOKENS  (BRON VAN WAARHEID)
   ----------------------------------------------------------------------------
   Het `davidanalytics` default-thema: de neutrale basis die elke app erft.
   Brand-thema's (atlas/rijschool) overschrijven hieronder alleen de
   merk-bepalende tokens via `:root[data-theme="…"]`.

   Een merk verschilt op KLEUR én RADIUS én TYPE én SHADOW — alle vier zijn
   tokens, zodat een thema het hele merkkarakter zet zonder component-edits.

   Token-namen zijn SEMANTISCH: --primary-* (hoofd-/merkkleur), --accent-*
   (CTA/waarschuwing), --ink-* (tekst/neutralen). De componenten lezen deze.

   NB: dit neutrale palet is bewust ingetogen (slate + Inter, moderate radius).
   Verfijn de DA-huisstijl later — alleen de waarden hieronder wijzigen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root,
:root[data-theme="davidanalytics"] {
  /* ----- PRIMARY (hoofd-/merkkleur — neutraal slate) --------------------- */
  --primary-900: #0f172a;
  --primary-700: #334155;
  --primary-600: #475569;   /* hover / donkere vlakken                       */
  --primary-500: #64748b;   /* PRIMARY — knoppen, links, actieve staat       */
  --primary-400: #94a3b8;   /* lichter accent / hovers op donker             */
  --primary-300: #cbd5e1;
  --primary-200: #e2e8f0;
  --primary-100: #eef2f7;   /* tint — chips, subtiele vullingen              */
  --primary-050: #f8fafc;   /* flauwe tint — sectie-achtergronden           */
  --primary-025: #fbfcfe;

  /* ----- ACCENT (CTA / waarschuwing — ingetogen amber) ------------------ */
  --accent-600: #d97706;
  --accent-500: #f59e0b;
  --accent-300: #fcd34d;
  --accent-050: #fffbeb;
  --flag-ink:   #92400e;    /* tekst op de zachte flag/melding-chip          */

  /* ----- INK (tekst / neutralen) ---------------------------------------- */
  --ink-900: #0f172a;       /* koppen                                        */
  --ink-700: #334155;       /* sterke bodytekst                              */
  --ink-500: #64748b;       /* secundaire / gedempte tekst                   */
  --ink-400: #94a3b8;
  --ink-300: #aab4c0;       /* placeholder, captions, disabled               */

  /* ----- SURFACE / LIJNEN ----------------------------------------------- */
  --surface:     #ffffff;   /* kaarten, default oppervlak                    */
  --bg:          #ffffff;   /* pagina-achtergrond                            */
  --bg-soft:     #f8fafc;   /* zachte sectie-achtergrond                     */
  --line:        #e2e8f0;   /* haarlijnen, randen                            */
  --line-strong: #cbd5e1;

  /* ----- SEMANTISCHE ALIASSEN ------------------------------------------- */
  --primary:     var(--primary-500);
  --primary-ink: #ffffff;
  --accent:      var(--accent-500);
  --accent-ink:  #ffffff;
  --link:        var(--primary-600);
  --focus-ring:  var(--primary-400);

  /* ----- STATUS --------------------------------------------------------- */
  --success:     #16a34a;
  --success-050: #f0fdf4;
  --warning:     var(--accent-500);
  --danger:      #dc2626;
  --danger-050:  #fef2f2;

  /* ----- TYPOGRAFIE ----------------------------------------------------- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;  /* koppen/knoppen */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;  /* UI-tekst       */

  --fs-eyebrow: 0.875rem;
  --fs-h1:      4rem;
  --fs-h2:      2.5rem;
  --fs-h3:      1.75rem;
  --fs-h4:      1.25rem;
  --fs-lead:    1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-eyebrow: 0.12em;
  --tracking-tight:  -0.01em;

  /* ----- RADIUS (moderate) ---------------------------------------------- */
  --r-pill: 999px;          /* knoppen, badges — vol rond                    */
  --r-card: 12px;           /* kaarten                                       */
  --r-lg:   16px;           /* grote vlakken                                 */
  --r-xl:   24px;           /* extra groot                                   */
  --r-sm:   8px;            /* inputs, kleine chips                          */

  /* ----- SHADOW (neutraal, slate-getint) -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 6px 18px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.08);

  /* ----- SPACING -------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --maxw: 1200px;
}