/* Voedingsgeneeskunde Design System - Kleuren */

:root {
  /* === VG Core Colors === */
  /* Zwart/Grijs palette */
  --vg-zwart-dark: #352F3B;
  --vg-zwart: #655b70;
  --vg-zwart-100: #f8f7f8;
  --vg-zwart-95: #eeecef;
  --vg-zwart-90: #e5e2e7;
  --vg-zwart-80: #d1cdd4;
  --vg-zwart-70: #beb8c2;
  --vg-zwart-60: #aaa3af;
  --vg-zwart-50: #968f9c;
  --vg-zwart-40: #837a89;
  
  /* Grijs */
  --vg-grijs1: #f1f5ef;
  --vg-grijs2: #e3ebe0;
  --vg-grijs3: #d5e1d0;
  --vg-grijs4: #c7d7c1;
  --vg-grijs5: #b9cdb1;
  
  /* Groen (primary) */
  --vg-groen: #9cba56;
  --vg-groen-light: #c5dc9a;
  --vg-groen-dark: #7a9842;
  
  /* Blauw */
  --vg-blauw: #5693bf;
  --vg-blauw-light: #8cb5d4;
  --vg-blauw-dark: #3d7499;
  
  /* Rood */
  --vg-rood: #bf4a22;
  --vg-rood-light: #d47d5e;
  --vg-rood-dark: #993b1b;
  
  /* Goud */
  --vg-goud: #bfa871;
  --vg-goud-light: #d4c49a;
  --vg-goud-dark: #99865a;
  
  /* === Semantic Colors === */
  --vg-color-primary: var(--vg-groen);
  --vg-color-secondary: var(--vg-blauw);
  --vg-color-accent: var(--vg-goud);
  --vg-color-error: var(--vg-rood);
  
  /* Backgrounds */
  --vg-color-background: var(--vg-zwart-100);
  --vg-color-surface: var(--vg-grijs1);
  --vg-color-surface-variant: var(--vg-grijs2);
  
  /* Text */
  --vg-color-text-primary: var(--vg-zwart);
  --vg-color-text-secondary: var(--vg-zwart-60);
  --vg-color-text-on-primary: var(--vg-zwart-100);
  --vg-color-text-link: var(--vg-groen);
  
  /* Borders */
  --vg-color-border: var(--vg-grijs3);
  --vg-color-border-light: var(--vg-grijs2);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --vg-color-background: var(--vg-zwart-dark);
    --vg-color-surface: var(--vg-zwart);
    --vg-color-text-primary: var(--vg-zwart-100);
    --vg-color-text-secondary: var(--vg-zwart-80);
    --vg-color-border: var(--vg-zwart-60);
  }
}