/* Theme toggle + readable light-mode hooks for the sandbox Tool Hub. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6FB;
  --panel: #FFFFFF;
  --panel-2: #EEF4FF;
  --line: rgba(42, 49, 65, .14);
  --muted: #5F6B7A;
  --soft: #334155;
  --text: #142033;
  --cyan: #007A6F;
  --cyan-2: #008C95;
  --blue: #2962FF;
  --blue-soft: #4E7DFF;
  --green: #1B8A57;
  --warn: #B7791F;
  --danger: #D14343;
  --alta-bg-base: #F4F6FB;
  --alta-bg-surface: #FFFFFF;
  --alta-bg-elevated: #EEF4FF;
  --alta-bg-input: #FFFFFF;
  --alta-border: rgba(42, 49, 65, .14);
  --alta-border-strong: rgba(41, 98, 255, .30);
  --alta-primary: #2962FF;
  --alta-primary-hover: #1E56E5;
  --alta-accent: #007A6F;
  --alta-text: #142033;
  --alta-text-muted: #5F6B7A;
  --alta-shadow: 0 18px 54px rgba(15, 23, 42, .10);
  --alta-shadow-tight: 0 10px 28px rgba(15, 23, 42, .08);
  --alta-glow: 0 0 0 1px rgba(41, 98, 255, .12), 0 0 22px rgba(41, 98, 255, .09);
  --alta-focus: 0 0 0 3px rgba(41, 98, 255, .16);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, .28);
  background: rgba(7, 12, 24, .58);
  color: #D9E2F7;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: rgba(41, 98, 255, .14);
  border-color: rgba(0, 255, 255, .42);
  color: #FFFFFF;
  box-shadow: var(--alta-focus, 0 0 0 3px rgba(0, 255, 255, .16)), 0 0 22px rgba(0, 255, 255, .12);
  outline: none;
}
.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  font-size: 13px;
  line-height: 1;
}
.theme-toggle-text { white-space: nowrap; }

:root[data-theme="light"] body {
  background-color: #F4F6FB;
  background-image:
    radial-gradient(900px 520px at 78% -12%, rgba(41, 98, 255, .11), transparent 60%),
    radial-gradient(760px 440px at 8% 10%, rgba(0, 255, 204, .06), transparent 58%),
    linear-gradient(180deg, #F8FAFF 0%, #F4F6FB 52%, #EEF2F8 100%);
  color: var(--text);
}
:root[data-theme="light"] body::before {
  background:
    linear-gradient(rgba(41, 98, 255, .050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 98, 255, .040) 1px, transparent 1px);
  opacity: .64;
}
:root[data-theme="light"] body::after {
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(41, 98, 255, .040) 36%, transparent 45% 100%),
    radial-gradient(circle at 16% 26%, rgba(0, 255, 204, .055), transparent 24%),
    radial-gradient(circle at 84% 20%, rgba(41, 98, 255, .075), transparent 28%),
    linear-gradient(180deg, rgba(244, 246, 251, .24), rgba(244, 246, 251, .82));
  opacity: .94;
}
:root[data-theme="light"] .ambient-bg {
  opacity: .20;
  filter: saturate(.72);
}
:root[data-theme="light"] .ambient-bg::after {
  background: linear-gradient(180deg, rgba(244, 246, 251, .68), rgba(244, 246, 251, .96));
  opacity: 1;
}
:root[data-theme="light"] .circuit-board-canvas {
  opacity: .24;
  mix-blend-mode: multiply;
}

:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .90);
  border-bottom-color: rgba(42, 49, 65, .12);
  box-shadow: 0 10px 34px rgba(15, 23, 42, .08);
}
:root[data-theme="light"] .brand-logo {
  background: linear-gradient(135deg, #2962FF 0%, #1E56E5 58%, #00AFA0 130%);
  box-shadow: 0 0 0 1px rgba(41, 98, 255, .16), 0 10px 24px rgba(41, 98, 255, .18);
}
:root[data-theme="light"] .brand-logo i { border-color: #FFFFFF; }
:root[data-theme="light"] .brand-title,
:root[data-theme="light"] .greeting h1,
:root[data-theme="light"] .clock-time,
:root[data-theme="light"] .app-card h3,
:root[data-theme="light"] .news-title,
:root[data-theme="light"] .doc-title,
:root[data-theme="light"] .cta h2,
:root[data-theme="light"] .operator-card h2,
:root[data-theme="light"] .tool-hero h1,
:root[data-theme="light"] .metric strong,
:root[data-theme="light"] .setup-list strong,
:root[data-theme="light"] .note-list strong {
  color: var(--text);
  text-shadow: none;
}
:root[data-theme="light"] .brand-sub,
:root[data-theme="light"] .clock-tz,
:root[data-theme="light"] .section-heading .label,
:root[data-theme="light"] .section-heading .count,
:root[data-theme="light"] .greeting p,
:root[data-theme="light"] .app-card p,
:root[data-theme="light"] .cta p,
:root[data-theme="light"] .tool-hero p,
:root[data-theme="light"] .operator-card p,
:root[data-theme="light"] .doc-host,
:root[data-theme="light"] .news-date,
:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .footer,
:root[data-theme="light"] .operator-form label,
:root[data-theme="light"] .operator-message,
:root[data-theme="light"] .metric div:last-child,
:root[data-theme="light"] .setup-list li {
  color: var(--muted);
}
:root[data-theme="light"] .date,
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .docs-panel .section-heading .label,
:root[data-theme="light"] .docs-panel .section-heading .count {
  color: #007A6F;
}
:root[data-theme="light"] .section-heading .rule {
  background: linear-gradient(90deg, rgba(41, 98, 255, .36), rgba(0, 122, 111, .12), transparent);
}

:root[data-theme="light"] .search::before { border-color: #7B8797; }
:root[data-theme="light"] .search::after { background: #7B8797; }
:root[data-theme="light"] .search input,
:root[data-theme="light"] .operator-form input {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(42, 49, 65, .14);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 24px rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .search input::placeholder,
:root[data-theme="light"] .operator-form input::placeholder { color: #667085; }

:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .operator-button,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .secondary-launch {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(41, 98, 255, .22);
  color: #1B2A41;
}
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .theme-toggle:focus-visible,
:root[data-theme="light"] .operator-button:hover,
:root[data-theme="light"] .operator-button[aria-expanded="true"],
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .secondary-launch:hover {
  background: rgba(41, 98, 255, .07);
  border-color: rgba(41, 98, 255, .42);
  color: #0F1D33;
  box-shadow: var(--alta-focus), var(--alta-glow);
}

:root[data-theme="light"] .greeting-section,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .app-card,
:root[data-theme="light"] .operator-card,
:root[data-theme="light"] .tool-facts div,
:root[data-theme="light"] .setup-list li {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
  border-color: rgba(42, 49, 65, .14);
  box-shadow: var(--alta-shadow-tight), inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--text);
}
:root[data-theme="light"] .greeting-section::before {
  background: linear-gradient(180deg, #2962FF, rgba(0, 122, 111, .62), transparent 92%);
}
:root[data-theme="light"] .app-card::before {
  background: radial-gradient(460px 150px at var(--mx, 15%) -24%, rgba(41, 98, 255, .12), transparent 62%);
}
:root[data-theme="light"] .app-card:hover,
:root[data-theme="light"] .app-card:focus-visible {
  background: linear-gradient(180deg, #FFFFFF, #EEF4FF);
  border-color: rgba(41, 98, 255, .34);
  box-shadow: var(--alta-shadow), var(--alta-glow);
}

:root[data-theme="light"] .cta,
:root[data-theme="light"] .docs-panel,
:root[data-theme="light"] .tool-hero {
  background:
    linear-gradient(115deg, #FFFFFF, #EEF4FF 50%, #EAFDF8),
    radial-gradient(520px 240px at 90% -10%, rgba(0, 122, 111, .08), transparent 60%);
  border-color: rgba(41, 98, 255, .24);
  box-shadow: var(--alta-shadow), inset 0 1px 0 rgba(255, 255, 255, .84);
}
:root[data-theme="light"] .cta::before,
:root[data-theme="light"] .docs-panel::before,
:root[data-theme="light"] .tool-hero::before {
  background-image:
    linear-gradient(90deg, rgba(41, 98, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(0, 122, 111, .045) 1px, transparent 1px);
}
:root[data-theme="light"] .cta::after { opacity: .24; }
:root[data-theme="light"] .launch,
:root[data-theme="light"] .operator-submit {
  background: linear-gradient(135deg, #2962FF, #1E56E5 58%, #00AFA0 145%);
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(41, 98, 255, .22), 0 0 0 1px rgba(255, 255, 255, .30) inset;
}
:root[data-theme="light"] .metric {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(42, 49, 65, .12);
}

:root[data-theme="light"] .app-code,
:root[data-theme="light"] .kind,
:root[data-theme="light"] .docs-panel .kind,
:root[data-theme="light"] .setup-list li::before {
  background: linear-gradient(145deg, #EEF4FF, #E8FAF7);
  border-color: rgba(41, 98, 255, .26);
  color: #1642A6;
}
:root[data-theme="light"] .external { color: #738196; }
:root[data-theme="light"] .tag {
  background: #E8F0FF;
  color: #1642A6;
}
:root[data-theme="light"] .doc-row,
:root[data-theme="light"] .news-item,
:root[data-theme="light"] .docs-panel .doc-row {
  border-color: rgba(42, 49, 65, .12);
}
:root[data-theme="light"] .docs-panel .doc-row {
  background: rgba(255, 255, 255, .74);
}
:root[data-theme="light"] .doc-row:hover,
:root[data-theme="light"] .news-item:hover,
:root[data-theme="light"] .docs-panel .doc-row:hover {
  background: rgba(41, 98, 255, .055);
  border-color: rgba(41, 98, 255, .20);
}
:root[data-theme="light"] .setup-list code,
:root[data-theme="light"] .note-list code {
  background: #EEF4FF;
  color: #1642A6;
  border-color: rgba(41, 98, 255, .16);
}

:root[data-theme="light"] .status.ok,
:root[data-theme="light"] .app-health.ok,
:root[data-theme="light"] .operator-button.is-authenticated {
  background: rgba(27, 138, 87, .10);
  border-color: rgba(27, 138, 87, .30);
  color: #11683F;
}
:root[data-theme="light"] .status.ok span:last-child { color: #11683F; }
:root[data-theme="light"] .status.issue {
  background: rgba(183, 121, 31, .10);
  border-color: rgba(183, 121, 31, .30);
}
:root[data-theme="light"] .status.issue span:last-child { color: #8A5200; }
:root[data-theme="light"] .status.down,
:root[data-theme="light"] .app-health.down {
  background: rgba(209, 67, 67, .10);
  border-color: rgba(209, 67, 67, .30);
  color: #B3261E;
}
:root[data-theme="light"] .status.down span:last-child { color: #B3261E; }
:root[data-theme="light"] .status.checking,
:root[data-theme="light"] .app-health,
:root[data-theme="light"] .app-health.checking,
:root[data-theme="light"] .app-health.linked {
  background: rgba(41, 98, 255, .08);
  border-color: rgba(41, 98, 255, .24);
  color: #1E54D6;
}
:root[data-theme="light"] .status.checking span:last-child { color: #1E54D6; }
:root[data-theme="light"] .operator-modal { background: rgba(15, 23, 42, .20); }
:root[data-theme="light"] .operator-close {
  background: rgba(41, 98, 255, .08);
  color: #1B2A41;
}
:root[data-theme="light"] .operator-message.error { color: #B3261E; }
:root[data-theme="light"] .operator-message.ok { color: #11683F; }

@media (max-width: 760px) {
  .theme-toggle {
    min-width: 38px;
    padding: 8px 10px;
  }
  .theme-toggle-text { display: none; }
}

/* Retheme pass 2: cleaner light mode with stronger hierarchy and less washout. */
:root[data-theme="light"] {
  --bg: #F3F6FA;
  --panel: #FFFFFF;
  --panel-2: #F7FAFF;
  --line: rgba(38, 52, 78, .15);
  --muted: #5E6D83;
  --soft: #2F3E56;
  --text: #102033;
  --cyan: #008C95;
  --cyan-2: #006F78;
  --blue: #2962FF;
  --blue-soft: #4B76F4;
  --alta-bg-base: #F3F6FA;
  --alta-bg-surface: #FFFFFF;
  --alta-bg-elevated: #F7FAFF;
  --alta-bg-input: #FFFFFF;
  --alta-border: rgba(38, 52, 78, .15);
  --alta-border-strong: rgba(41, 98, 255, .30);
  --alta-primary: #2962FF;
  --alta-accent: #007C89;
  --alta-text: #102033;
  --alta-text-muted: #5E6D83;
  --alta-shadow: 0 20px 52px rgba(15, 23, 42, .12);
  --alta-shadow-tight: 0 12px 28px rgba(15, 23, 42, .09);
  --alta-glow: 0 0 0 1px rgba(41, 98, 255, .14), 0 0 20px rgba(41, 98, 255, .10);
  --alta-focus: 0 0 0 3px rgba(41, 98, 255, .18);
}

:root[data-theme="light"] body {
  background-color: #F3F6FA;
  background-image:
    radial-gradient(760px 420px at 86% -8%, rgba(41, 98, 255, .10), transparent 62%),
    radial-gradient(620px 360px at 8% 20%, rgba(0, 124, 137, .055), transparent 64%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 42%, #E9EEF7 100%);
}

:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(38, 52, 78, .12);
}

:root[data-theme="light"] .greeting-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(247,250,255,.95)),
    radial-gradient(580px 220px at 84% 0%, rgba(41, 98, 255, .10), transparent 66%);
  border-color: rgba(38, 52, 78, .13);
}

:root[data-theme="light"] .app-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98)),
    radial-gradient(260px 120px at 0 0, rgba(41,98,255,.07), transparent 70%);
  border-color: rgba(38, 52, 78, .14);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255,255,255,.90);
}

:root[data-theme="light"] .app-card::before {
  background: linear-gradient(180deg, rgba(41,98,255,.50), rgba(0,124,137,.24), transparent 74%);
}

:root[data-theme="light"] .app-card:hover,
:root[data-theme="light"] .app-card:focus-visible {
  background:
    linear-gradient(180deg, #FFFFFF, #F0F5FF),
    radial-gradient(300px 130px at 0 0, rgba(41,98,255,.10), transparent 70%);
  border-color: rgba(41, 98, 255, .30);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .10), var(--alta-glow);
}

:root[data-theme="light"] .app-code,
:root[data-theme="light"] .kind,
:root[data-theme="light"] .docs-panel .kind,
:root[data-theme="light"] .setup-list li::before {
  background: linear-gradient(145deg, #EFF5FF, #E8FAF7);
  border-color: rgba(41, 98, 255, .28);
  color: #1642A6;
}

:root[data-theme="light"] .cta,
:root[data-theme="light"] .docs-panel,
:root[data-theme="light"] .tool-hero {
  background:
    linear-gradient(100deg, #FFFFFF 0%, #F2F7FF 48%, #EAFDF8 100%),
    radial-gradient(520px 240px at 90% -10%, rgba(0, 124, 137, .08), transparent 60%);
  border-color: rgba(41, 98, 255, .25);
}

:root[data-theme="light"] .metric {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(38, 52, 78, .13);
}

:root[data-theme="light"] .panel,
:root[data-theme="light"] .docs-panel,
:root[data-theme="light"] .operator-card,
:root[data-theme="light"] .tool-facts div,
:root[data-theme="light"] .setup-list li {
  border-color: rgba(38, 52, 78, .14);
}

:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .operator-button,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .secondary-launch {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(41, 98, 255, .22);
  color: #152238;
}

:root[data-theme="light"] .theme-toggle:focus-visible,
:root[data-theme="light"] .operator-button:focus-visible,
:root[data-theme="light"] .nav-link:focus-visible,
:root[data-theme="light"] .secondary-launch:focus-visible {
  box-shadow: var(--alta-focus), var(--alta-glow);
}