:root,
:root[data-theme="light"] {
  --color-brand: var(--brand-red-500);
  --color-bg: var(--gray-100);
  --color-surface: var(--white);
  --color-border: var(--gray-200);
  --color-text: var(--gray-900);
  --color-muted: var(--gray-600);
  --shadow-elev: var(--shadow-md);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--darkmode-bg);
    --color-surface: var(--darkmode-surface);
    --color-border: var(--darkmode-border);
    --color-text: var(--gray-200);
    --color-muted: var(--gray-400);
    --shadow-elev: var(--shadow-lg);
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--darkmode-bg);
  --color-surface: var(--darkmode-surface);
  --color-border: var(--darkmode-border);
  --color-text: var(--gray-200);
  --color-muted: var(--gray-400);
  --shadow-elev: var(--shadow-lg);
}