:root {
  --bg: #f5f5f5;
  --fg: #333;
  --fg-muted: #666;
  --border: #ddd;
  --surface: #ffffff;
  --hover: #eeeeee;
  --link: #a02a1e;
  --link-hover: #c03a2b;
  --accent: #e65c00;
  --accent-contrast: #fff;

  --accent-fill: color-mix(in srgb, var(--accent-contrast) 12%, transparent);
  --accent-fill-hover: color-mix(in srgb, var(--accent-contrast) 18%, transparent);
  --accent-fill-focus: color-mix(in srgb, var(--accent-contrast) 20%, transparent);
  --accent-fill-active: color-mix(in srgb, var(--accent-contrast) 22%, transparent);
  --accent-border: color-mix(in srgb, var(--accent-contrast) 35%, transparent);
  --accent-placeholder: color-mix(in srgb, var(--accent-contrast) 72%, transparent);
  --accent-focus: color-mix(in srgb, var(--accent-contrast) 75%, transparent);
  --accent-action-hover: color-mix(in srgb, var(--accent-contrast) 85%, transparent);
  --text-primary: var(--fg);
  --text-secondary: var(--fg-muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e0e0e0;
    --fg-muted: #999;
    --border: #444;
    --surface: #242424;
    --hover: #2a2a2a;
    --link: #e58a7d;
    --link-hover: #f0aca2;
    --accent: #e65c00;
    --accent-contrast: #fff;
  }
}