:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0f14;
  --nav-bg: #111827;
  --panel: #111827;
  --detail-bg: #111827;
  --control-bg: #0f172a;
  --field-bg: #0f172a;
  --select-option-bg: #0f172a;
  --nav-active: color-mix(in srgb, var(--accent) 18%, transparent);
  --text: #e5e7eb;
  --text-soft: #d1d5db;
  --muted: #9ca3af;
  --line: #243041;
  --line-strong: #334155;
  --accent: #3b82f6;
  --accent-strong: #60a5fa;
  --link: #3b82f6;
  --star: #f4c95d;
  --button-bg: #3b82f6;
  --button-hover: #2563eb;
  --button-text: #ffffff;
  --button-secondary: #1f2937;
  --notice: #0f172a;
  --warning-bg: rgba(251, 191, 36, 0.13);
  --warning-text: #fbbf24;
  --panel-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #f5f5f5;
    --nav-bg: #ffffff;
    --panel: #ffffff;
    --detail-bg: #ffffff;
    --control-bg: #f9fafb;
    --field-bg: #ffffff;
    --select-option-bg: #ffffff;
    --nav-active: color-mix(in srgb, var(--accent) 12%, transparent);
    --text: #111827;
    --text-soft: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --accent: #2563eb;
    --accent-strong: #2563eb;
    --link: #2563eb;
    --star: #b7791f;
    --button-bg: #2563eb;
    --button-hover: #1d4ed8;
    --button-text: #ffffff;
    --button-secondary: #e5e7eb;
    --notice: #f9fafb;
    --warning-bg: rgba(180, 83, 9, 0.12);
    --warning-text: #92400e;
    --panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f5f5;
  --nav-bg: #ffffff;
  --panel: #ffffff;
  --detail-bg: #ffffff;
  --control-bg: #f9fafb;
  --field-bg: #ffffff;
  --select-option-bg: #ffffff;
  --nav-active: color-mix(in srgb, var(--accent) 12%, transparent);
  --text: #111827;
  --text-soft: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --accent: #2563eb;
  --accent-strong: #2563eb;
  --link: #2563eb;
  --star: #b7791f;
  --button-bg: #2563eb;
  --button-hover: #1d4ed8;
  --button-text: #ffffff;
  --button-secondary: #e5e7eb;
  --notice: #f9fafb;
  --warning-bg: rgba(180, 83, 9, 0.12);
  --warning-text: #92400e;
  --panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}