/**
 * JG Ongediertebeheer — Design Tokens
 * Natuurvriendelijk: moss-green + soft sage + deep forest navy.
 */

:root {
  /* Brand — forest / nature */
  --color-navy-950: #0A1410;
  --color-navy-900: #0F1F18;
  --color-navy-800: #1A3328;
  --color-navy-700: #2D4A3A;
  --color-navy-600: #3D5C4A;

  /* Primary green — richer, more natural */
  --color-accent: #16A34A;
  --color-accent-hover: #15803D;
  --color-accent-soft: #DCFCE7;
  --color-accent-muted: #4ADE80;
  --color-accent-deep: #14532D;
  --color-sage: #84A98C;
  --color-moss: #52796F;
  --color-leaf: #74C69D;
  --color-cream: #F4F7F2;

  --color-white: #FFFFFF;
  --color-gray-50: #F4F7F2;
  --color-gray-100: #E8EFE6;
  --color-gray-200: #D4E0D4;
  --color-gray-300: #B7C9B7;
  --color-gray-400: #8AA08A;
  --color-gray-500: #5C735C;
  --color-gray-600: #3F5240;

  --color-danger: #EF4444;
  --color-danger-soft: #FEE2E2;
  --color-warning: #D97706;
  --color-warning-soft: #FEF3C7;
  --color-info: #0D9488;
  --color-info-soft: #CCFBF1;

  /* Semantic — light (soft sage wash) */
  --bg: #F3F7F1;
  --bg-elevated: #FFFFFF;
  --bg-muted: #E6F0E4;
  --bg-inverse: var(--color-navy-900);
  --text: #14241A;
  --text-secondary: #4A6354;
  --text-inverse: #F4F7F2;
  --border: #D0E0D0;
  --border-strong: #B0C8B0;
  --ring: rgba(22, 163, 74, 0.35);
  --shadow-sm: 0 1px 2px rgba(20, 50, 30, 0.05);
  --shadow: 0 4px 16px rgba(20, 50, 30, 0.07), 0 1px 3px rgba(20, 50, 30, 0.04);
  --shadow-lg: 0 12px 40px rgba(20, 50, 30, 0.1), 0 4px 12px rgba(20, 50, 30, 0.05);
  --overlay: rgba(15, 31, 24, 0.5);

  /* Priority / status */
  --status-nieuw: #0D9488;
  --status-gepland: #059669;
  --status-uitgevoerd: #D97706;
  --status-afgerond: #16A34A;
  --prio-laag: #8AA08A;
  --prio-normaal: #0D9488;
  --prio-hoog: #D97706;
  --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 — deep forest */
html.dark {
  --bg: #0A1410;
  --bg-elevated: #12201A;
  --bg-muted: #1A3328;
  --bg-inverse: #F3F7F1;
  --text: #E8F5E9;
  --text-secondary: #8FB89A;
  --text-inverse: #0F1F18;
  --border: #1F3A2C;
  --border-strong: #2D4A3A;
  --ring: rgba(74, 222, 128, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.65);
  --color-accent: #22C55E;
  --color-accent-hover: #4ADE80;
  --color-accent-soft: rgba(34, 197, 94, 0.15);
  --color-accent-muted: #86EFAC;
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-warning-soft: rgba(217, 119, 6, 0.15);
  --color-info-soft: rgba(13, 148, 136, 0.15);
}

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