/* assets/css/tokens.css
   Gedeelde design-tokens (kleuren, radius, shadows). Zie ARCHITECTURE.md.
   Bewijsbaar identiek gebruikt in: index.html, tools/index.html, dashboards/index.html,
   upload/index.html (en varianten in admin/dashboard-builder — daar bij hun eigen
   migratie meenemen). --gray-300/--green toegevoegd t.b.v. upload/index.html,
   --red toegevoegd t.b.v. upload/dashboard/index.html. */
:root {
  --blue-deep: #1e3a8a;
  --blue-mid:  #2563eb;
  --blue-acc:  #3b82f6;
  --blue-light:#eff6ff;
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-600:  #4b5563;
  --gray-900:  #111827;
  --white:     #ffffff;
  --green:     #16a34a;
  --red:       #dc2626;
  --radius:    12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 48px rgba(30,58,138,.12), 0 4px 12px rgba(0,0,0,.06);
}