<style>
  :root {
    --bg-main: #ffffff;
    --bg-surface: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --radius-main: 12px;
  }

  /* 1. System Dark Mode Default */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-main: #0f172a;
      --bg-surface: #1e293b;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --accent: #3b82f6;
      --accent-hover: #60a5fa;
      --border-color: #334155;
      --card-bg: #1e293b;
      --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
  }

  /* 2. JavaScript Interactive Overrides */
  [data-theme="light"] {
    --bg-main: #ffffff;
    --bg-surface: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  }

  [data-theme="dark"] {
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --border-color: #334155;
    --card-bg: #1e293b;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  }
</style>