:root,
:host {
  /* Theme variables (light mode) */
  --color-background: var(--color-white);
  --color-primary: var(--color-indigo-600);
  --color-primary-text: var(--color-white);
  --color-text-base: var(--color-gray-900);
  --color-text-dimmed: var(--color-gray-600);
  --color-link: var(--color-indigo-600);
  --color-shade-1: var(--color-gray-50);
  --color-shade-2: var(--color-gray-200);
  --color-shade-3: var(--color-gray-300);
}

@media (prefers-color-scheme: dark) {
  :root,
  :host {
    /* Theme variables (dark mode) */
    --color-background: var(--color-gray-900);
    --color-primary: var(--color-indigo-600);
    --color-primary-text: var(--color-white);
    --color-text-base: var(--color-gray-50);
    --color-text-dimmed: var(--color-gray-400);
    --color-link: var(--color-indigo-400);
    --color-shade-1: var(--color-gray-800);
    --color-shade-2: var(--color-gray-700);
    --color-shade-3: var(--color-gray-600);
  }
}