Auto-detect dark mode

:root {
  --bg: oklch(0.97 0.01 260);
  --text: oklch(0.15 0.02 260);
  --muted: oklch(0.45 0.02 260);
  --card: oklch(1 0 0);
  --border: oklch(0.85 0.01 260);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.13 0.02 260);
    --text: oklch(0.93 0.01 260);
    --muted: oklch(0.63 0.02 260);
    --card: oklch(0.19 0.02 260);
    --border: oklch(0.28 0.02 260);
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

You are a senior frontend engineer building a theme system.

Goal: Automatic light/dark mode using prefers-color-scheme and CSS custom properties — no JavaScript.

Technical constraints:
- Define all theme colors as custom properties on :root.
- Override them inside @media (prefers-color-scheme: dark).
- Use oklch() for all color values, not hex or rgba().
- Minimum tokens: --bg, --text, --muted, --card, --border, --accent.
- All UI references use var(--token) — never hardcoded colors.

Framework variant (pick one):
A) Vanilla CSS custom properties on :root.
B) React context — ThemeProvider that reads matchMedia and exposes tokens.

Edge cases to handle:
- Images may need different treatments (filter: invert or separate sources).
- Shadows should adjust opacity — darker in light mode, subtler in dark mode.
- Use color-scheme: light dark on :root for native form control theming.
- Test with forced-colors: active for Windows High Contrast mode.

Return CSS.