/* Design System Tokens */
:root {
  /* Light mode */
  --color-bg-light: #ffffff;
  --color-primary-light: #10b981;
  --color-primary-container-light: #e6f7f0;
  --color-secondary-light: #059669;
  --color-secondary-container-light: #d1fae5;
  --color-warning-light: #ea580c;
  --color-danger-light: #dc2626;
  --color-surface-light: #f9fafb;
  --color-text-primary-light: #111827;
  --color-text-muted-light: #4b5563;
  --color-border-light: rgba(0,0,0,0.08);
  /* Dark mode (existing variables overridden elsewhere) */
  --color-bg-dark: #0e1511;
  --color-primary-dark: #4edea3;
  --color-primary-container-dark: #10b981;
  --color-secondary-dark: #c3c0ff;
  --color-secondary-container-dark: #3626ce;
  --color-warning-dark: #fc7c78;
  --color-danger-dark: #ffb4ab;
  --color-surface-dark: #343b36;
  --color-text-primary-dark: #ffffff;
  --color-text-muted-dark: #9ca3af;
  --color-border-dark: rgba(255,255,255,0.07);
}

html.light {
  --color-bg: var(--color-bg-light);
  --color-primary: var(--color-primary-light);
  --color-primary-container: var(--color-primary-container-light);
  --color-secondary: var(--color-secondary-light);
  --color-secondary-container: var(--color-secondary-container-light);
  --color-warning: var(--color-warning-light);
  --color-danger: var(--color-danger-light);
  --color-surface: var(--color-surface-light);
  --color-text-primary: var(--color-text-primary-light);
  --color-text-muted: var(--color-text-muted-light);
  --color-border: var(--color-border-light);
}

html:not(.light) {
  --color-bg: var(--color-bg-dark);
  --color-primary: var(--color-primary-dark);
  --color-primary-container: var(--color-primary-container-dark);
  --color-secondary: var(--color-secondary-dark);
  --color-secondary-container: var(--color-secondary-container-dark);
  --color-warning: var(--color-warning-dark);
  --color-danger: var(--color-danger-dark);
  --color-surface: var(--color-surface-dark);
  --color-text-primary: var(--color-text-primary-dark);
  --color-text-muted: var(--color-text-muted-dark);
  --color-border: var(--color-border-dark);
}