/**
 * JG Ongediertebeheer — Design Tokens
 * Diep vertrouwen-blauw + frisse accent-groen, premium & rustig.
 */

:root {
  /* Brand */
  --color-navy-950: #0B1220;
  --color-navy-900: #0F172A;
  --color-navy-800: #1E293B;
  --color-navy-700: #334155;
  --color-navy-600: #475569;

  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-accent-soft: #D1FAE5;
  --color-accent-muted: #6EE7B7;

  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;

  --color-danger: #EF4444;
  --color-danger-soft: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-info: #3B82F6;
  --color-info-soft: #DBEAFE;

  /* Semantic — light */
  --bg: var(--color-gray-50);
  --bg-elevated: var(--color-white);
  --bg-muted: var(--color-gray-100);
  --bg-inverse: var(--color-navy-900);
  --text: var(--color-navy-900);
  --text-secondary: var(--color-gray-500);
  --text-inverse: var(--color-white);
  --border: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --ring: rgba(16, 185, 129, 0.35);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.05);
  --overlay: rgba(15, 23, 42, 0.5);

  /* Priority / status */
  --status-nieuw: #3B82F6;
  --status-gepland: #8B5CF6;
  --status-uitgevoerd: #F59E0B;
  --status-afgerond: #10B981;
  --prio-laag: #94A3B8;
  --prio-normaal: #3B82F6;
  --prio-hoog: #F59E0B;
  --prio-spoed: #EF4444;

  /* Typography */
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;

  /* Spacing & radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --space-section: clamp(3.5rem, 8vw, 6rem);
  --container: 72rem;
  --header-h: 4.25rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 200ms;
  --duration-slow: 350ms;
}

/* Dark mode */
html.dark {
  --bg: #0B1220;
  --bg-elevated: #111827;
  --bg-muted: #1E293B;
  --bg-inverse: #F8FAFC;
  --text: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-inverse: #0F172A;
  --border: #1E293B;
  --border-strong: #334155;
  --ring: rgba(16, 185, 129, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.65);
  --color-accent-soft: rgba(16, 185, 129, 0.15);
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-warning-soft: rgba(245, 158, 11, 0.15);
  --color-info-soft: rgba(59, 130, 246, 0.15);
}

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