/* KOPIE van kansenscanner/static/tokens.css — houd beide gelijk (marketing draait zelfstandig, ook op een subdomein). */
/* ==========================================================================
   Solum Signal design tokens — de enige plek met ruwe waarden.
   Zie STYLE.md voor de designtaal. Nergens anders hardcoded kleuren/maten.
   ========================================================================== */

:root {
  /* --- Basis: gebroken licht --- */
  --paper: #F7F6F2;            /* pagina-achtergrond */
  --surface: #FFFFFF;          /* panelen, cards */
  --surface-sunken: #F1EFEA;   /* verdiepte vlakken (skeletons, sliders) */
  --ink: #1B1A17;              /* primaire tekst */
  --muted: #6E6A60;            /* secundaire tekst (AA op papier en surface) */
  --faint: #98948A;            /* tertiair: hints, disabled */
  --hairline: #E7E4DC;
  --hairline-strong: #D6D2C8;
  --danger: #A33B2D;
  --danger-soft: #F6E3DF;

  /* --- Signatuur: bestemmingsplankleuren (SVBP) — fill / rand / inkt --- */
  --t-woningbouw-fill: #F4E7A3;
  --t-woningbouw-line: #C9A800;
  --t-woningbouw-ink:  #6E5A00;
  --t-agrarisch_wonen-fill: #D4E6B8;
  --t-agrarisch_wonen-line: #7BA042;
  --t-agrarisch_wonen-ink:  #3D5A1E;
  --t-bedrijventerrein-fill: #DCC6E8;
  --t-bedrijventerrein-line: #9A6BB5;
  --t-bedrijventerrein-ink:  #5C3578;
  --t-horeca_gemengd-fill: #F8D5AC;
  --t-horeca_gemengd-line: #D98A2B;
  --t-horeca_gemengd-ink:  #7A4A0E;
  --t-hoogbouw-fill: #EFC5BD;
  --t-hoogbouw-line: #C2654F;
  --t-hoogbouw-ink:  #7D3325;

  /* --- Typografie --- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --text-xs: 11px;   /* labels: caps + spacing */
  --text-sm: 12.5px; /* meta */
  --text-base: 14px; /* UI-tekst */
  --text-md: 15px;   /* paneeltitels */
  --text-lg: 18px;   /* sectiekoppen */
  --text-xl: 26px;   /* kerngetallen */
  --text-2xl: 34px;  /* de prijs */
  --tracking-caps: 0.08em;
  --tracking-display: -0.02em;

  /* --- Spacing (4px-grid) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* --- Vorm --- */
  --r-sm: 6px;   /* inputs, chips */
  --r-md: 10px;  /* cards */
  --r-lg: 16px;  /* panelen, dialogen */
  --r-full: 999px;

  /* --- Diepte: precies twee schaduwen --- */
  --shadow-panel: 0 1px 2px rgba(27, 26, 23, 0.05), 0 8px 24px rgba(27, 26, 23, 0.07);
  --shadow-pop: 0 2px 6px rgba(27, 26, 23, 0.08), 0 16px 40px rgba(27, 26, 23, 0.14);

  /* --- Focus --- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 150ms;
  --t-med: 200ms;
  --t-slow: 250ms;

  /* --- Lagen --- */
  --z-map-ui: 800;
  --z-sheet: 900;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}