/* =========================================================================
   IziWise design tokens - gedeeld door de afsluitstraat (app.css), de
   klantomgeving (/mijn) en de backoffice (admin.css).

   Twee blokken:
   1. De nieuwe --izi-* tokens (bron: design pack STYLE_TOKENS.css).
   2. De historische --amber- en --slate-namen, die hier opnieuw gedefinieerd
      worden op de nieuwe waarden. Zo krijgt bestaande CSS de nieuwe, rustigere
      kleuren zonder dat elke regel herschreven hoeft te worden.
      (Let op: schrijf in CSS-commentaar nooit een sterretje direct gevolgd
      door een slash - dat sluit het commentaar en sloopt de rest van het
      bestand.)

   LET OP - niet hernoemen: public/assets/app.js schrijft bij dealer-branding
   runtime rechtstreeks in --amber-500/400/300/600 en --amber-glow(-strong)
   om het merk van een autobedrijf toe te passen. Die namen moeten dus
   blijven bestaan, ook al heten ze niets zeggend "amber" terwijl ze groen zijn.
   ========================================================================= */

:root {
  /* --- IziWise merk (groen) --- */
  --izi-green-700: #085c38;
  --izi-green-600: #0b7a4a;
  --izi-green-500: #0a6e43;
  --izi-green-soft: rgba(11, 122, 74, 0.10);
  --izi-green-ring: rgba(11, 122, 74, 0.18);
  /* Groen zoals in het logo zelf (assets/img/iziwise-logo.svg) - alleen voor
     accenten waar het logo-groen beter past dan het actiegroen. */
  --izi-green-logo: #0d8f57;

  /* --- Neutralen (consumer) --- */
  --izi-ink: #132238;
  --izi-ink-strong: #0f1b2d;
  --izi-text: #243447;
  --izi-muted: #667384;
  --izi-muted-soft: #8a97a6;
  --izi-border: #dfe5e2;
  --izi-border-strong: #cbd4d0;
  --izi-bg: #f7f9f8;
  --izi-surface: #ffffff;
  --izi-surface-2: #eef2f0;

  /* --- Semantisch --- */
  --izi-success: #16a34a;
  --izi-warning: #d97706;
  --izi-danger: #dc2626;
  --izi-info: #2563eb;
  --izi-success-soft: rgba(22, 163, 74, 0.10);
  --izi-warning-soft: rgba(217, 119, 6, 0.10);
  --izi-danger-soft: rgba(220, 38, 38, 0.08);
  --izi-info-soft: rgba(37, 99, 235, 0.10);

  /* --- Vorm --- */
  --izi-radius-sm: 8px;
  --izi-radius-md: 12px;
  --izi-radius-lg: 16px;
  --izi-radius-xl: 20px;
  --izi-radius-pill: 999px;

  /* --- Elevatie --- */
  --izi-shadow-sm: 0 2px 10px rgba(15, 27, 45, 0.04);
  --izi-shadow-md: 0 8px 24px rgba(15, 27, 45, 0.06);
  --izi-shadow-lg: 0 14px 38px rgba(15, 27, 45, 0.08);

  /* --- Backoffice (donker) ---
     Opgelicht op 31-10-2026: de oude waarden begonnen op #071321, bijna
     zwart. De hele ladder is met dezelfde stap meegeschoven, zodat kaarten
     en zijbalk zich nog steeds van de achtergrond aftekenen. */
  --izi-bo-bg: #0f2133;
  --izi-bo-sidebar: #13283d;
  --izi-bo-surface: #183047;
  --izi-bo-surface-2: #1c3851;
  --izi-bo-surface-3: #234262;
  --izi-bo-border: rgba(255, 255, 255, 0.10);
  --izi-bo-border-strong: rgba(255, 255, 255, 0.18);
  --izi-bo-text: #f4f7f6;
  --izi-bo-muted: #9aa9b8;
  --izi-bo-green: #16a064;
  --izi-bo-green-soft: rgba(22, 160, 100, 0.14);
  /* Tweede reeks in een grafiek. Groen is 'onze cijfers'; amber markeert
     een andere bron of een andere grootheid, zodat je niet per ongeluk
     twee dingen als hetzelfde leest. */
  --izi-bo-amber: #e0a53c;

  /* --- Typografie --- */
  --izi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--izi-font);

  /* --- Beweging --- */
  --izi-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  /* =======================================================================
     Historische namen, nu gekoppeld aan de tokens hierboven.
     ======================================================================= */

  /* Merkgroen (wordt runtime overschreven door dealer-branding) */
  --amber-500: var(--izi-green-600);
  --amber-400: var(--izi-green-700);
  --amber-300: var(--izi-green-500);
  --amber-600: var(--izi-green-700);
  --amber-glow: var(--izi-green-soft);
  --amber-glow-strong: var(--izi-green-ring);

  /* Neutralen: --slate-800 werd overal als rand gebruikt (harde bijna-zwarte
     lijnen); die wijst nu naar de zachte randkleur. --slate-700 werd gemengd
     gebruikt voor tekst en randen - die is hier tekst, de paar randregels die
     'm gebruikten zijn in app.css/admin.css expliciet omgezet. */
  --slate-900: var(--izi-ink-strong);
  --slate-800: var(--izi-border);
  --slate-700: var(--izi-text);
  --slate-500: var(--izi-muted);
  --slate-400: var(--izi-muted-soft);
  --slate-300: var(--izi-border-strong);
  --slate-200: #e8edea;
  --slate-100: var(--izi-surface-2);
  --slate-850: var(--izi-bg);

  --danger: var(--izi-danger);
  --success: var(--izi-success);

  --radius-md: var(--izi-radius-md);
  --radius-lg: var(--izi-radius-lg);
  --shadow-lg: var(--izi-shadow-md);
}

/* Minder beweging voor wie daarom vraagt (WCAG 2.3.3 / prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}