:root[data-theme="light"] {
  color-scheme: light;
  --ink: #17241e;
  --muted: #596b62;
  --surface: #ffffff;
  --surface-strong: #f0f4f2;
  --surface-muted: #f6f8f7;
  --surface-raised: #ffffff;
  --panel: #ffffff;
  --line: rgba(30, 58, 45, 0.16);
  --border: var(--line);
  --accent: #4f8f24;
  --accent-strong: #3f781b;
  --danger: #b42318;
  --shadow: 0 24px 60px rgba(30, 58, 45, 0.14);
  --page-bg: #f4f7f5;
  --link: #075985;
}

:root[data-theme="light"] body {
  background: radial-gradient(circle at 12% 12%, rgba(98, 157, 65, 0.1), transparent 30rem), #f4f7f5;
}
:root[data-theme="light"] .login-panel,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .studio-nav { background-color: rgba(255, 255, 255, 0.88); }
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .studio-card,
:root[data-theme="light"] .phase-card,
:root[data-theme="light"] dialog { background: var(--surface); color: var(--ink); }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background-color: #fff; color: var(--ink); }
:root[data-theme="light"] .nav-item:hover,
:root[data-theme="light"] .nav-item.active,
:root[data-theme="light"] .nav-group summary:hover { background-color: #e9f2ed; }
:root[data-theme="light"] .workspace-contextbar { background: rgba(255, 255, 255, 0.9); color: var(--ink); }
:root[data-theme="light"] .admin-category { background: #fff; }
:root[data-theme="light"] .admin-category button { background: #f2f6f4; color: var(--ink); }
:root[data-theme="light"] .hierarchy-table th,
:root[data-theme="light"] .variable-library-item { background-color: var(--surface-strong); color: var(--ink); }
:root[data-theme="light"] .hierarchy-table td,
:root[data-theme="light"] .tree-table-member,
:root[data-theme="light"] .variable-library-item strong { color: var(--ink); }
:root[data-theme="light"] .notice { background: #fff; }
:root[data-theme="light"] .api-card { background: #fff; border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .api-card { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .api-shell { color: var(--ink); }

.theme-toggle {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-strong); }
.theme-toggle-floating { position: fixed; top: 18px; right: 18px; z-index: 20; }

:root[data-theme="dark"] { color-scheme: dark; --page-bg: #0b1210; --link: #72bfff; }