html[data-tt-theme="light"] {
  color-scheme: light;
  --tt-bg: #F5F1E5;
  --tt-surface: #FFFCF5;
  --tt-raised: #F0EBDD;
  --tt-text: #26392E;
  --tt-muted: #56635A;
  --tt-border: #B8B6A9;
  --tt-accent: #44664B;
  --tt-accent-strong: #36543D;
  --tt-gold: #80520A;
  --tt-gold-strong: #704500;
  --tt-rust: #934324;
  --tt-positive: #356446;
  --tt-negative: #A33732;
  --tt-warning: #80520A;
  --tt-focus: #6B4B10;
  --tt-shadow: 0 8px 24px rgba(38, 57, 46, .10);
}
html[data-tt-theme="dark"] {
  color-scheme: dark;
  --tt-bg: #201F1A;
  --tt-surface: #302C24;
  --tt-raised: #3A352B;
  --tt-text: #F4EAD6;
  --tt-muted: #C5BBA6;
  --tt-border: #706857;
  --tt-accent: #B3CA96;
  --tt-accent-strong: #C5D9AA;
  --tt-gold: #E4B55A;
  --tt-gold-strong: #F0C875;
  --tt-rust: #E18C60;
  --tt-positive: #B3CA96;
  --tt-negative: #FF8E82;
  --tt-warning: #F0C875;
  --tt-focus: #F0C875;
  --tt-shadow: 0 10px 28px rgba(0, 0, 0, .30);
}
html[data-tt-theme] body {
  color: var(--tt-text);
  background-color: var(--tt-bg);
}
html[data-tt-theme] a { color: inherit; }
html[data-tt-theme] :focus-visible {
  outline: 3px solid var(--tt-focus);
  outline-offset: 3px;
}
html[data-tt-theme] button,
html[data-tt-theme] input,
html[data-tt-theme] textarea,
html[data-tt-theme] select {
  color: var(--tt-text);
}
html[data-tt-theme] input::placeholder,
html[data-tt-theme] textarea::placeholder { color: var(--tt-muted); opacity: 1; }

/* TimeTrader home */
html[data-tt-theme="light"] body:has(.template-header) {
  --bg: var(--tt-bg); --paper: var(--tt-surface); --soft: var(--tt-raised); --line: var(--tt-border);
  --text: var(--tt-text); --muted: var(--tt-muted); --dark: var(--tt-accent-strong);
  --blue: var(--tt-accent-strong); --green: var(--tt-positive); --gold: var(--tt-gold);
}
html[data-tt-theme="dark"] body:has(.template-header) {
  --bg: var(--tt-bg); --paper: var(--tt-surface); --soft: var(--tt-raised); --line: var(--tt-border);
  --text: var(--tt-text); --muted: var(--tt-muted); --dark: var(--tt-accent-strong);
  --blue: var(--tt-accent-strong); --green: var(--tt-positive); --gold: var(--tt-gold);
}
html[data-tt-theme] body:has(.template-header) { background: var(--tt-bg); }
html[data-tt-theme] .template-title { color: var(--tt-gold); text-shadow: none; }
html[data-tt-theme] .starship-divider {
  background: linear-gradient(90deg, transparent, var(--tt-accent) 15%, var(--tt-gold) 50%, var(--tt-accent) 85%, transparent);
  box-shadow: none;
}
html[data-tt-theme] .prompt-wrap,
html[data-tt-theme] .answer,
html[data-tt-theme] .tier { background: var(--tt-surface); border-color: var(--tt-border); box-shadow: var(--tt-shadow); color: var(--tt-text); }
html[data-tt-theme] #prompt { color: var(--tt-text); }
html[data-tt-theme] .send { background: var(--tt-accent-strong); color: #fff; }
html[data-tt-theme] .mic { background: var(--tt-raised); color: var(--tt-text); border-color: var(--tt-border); }
html[data-tt-theme] .mic.listening { background: var(--tt-negative); border-color: var(--tt-negative); color: #fff; }
html[data-tt-theme] .tier h2 { color: var(--tt-accent-strong); }
html[data-tt-theme] .tier.auth { border-color: var(--tt-accent); }
html[data-tt-theme] .tier.auth button { background: var(--tt-accent-strong); color: #fff; }
html[data-tt-theme] .shortcut { color: var(--tt-text); text-shadow: none; }
html[data-tt-theme] .shortcut-icon.text,
html[data-tt-theme] .shortcut-icon.fallback { background: var(--tt-accent-strong); color: var(--tt-gold); border-color: var(--tt-gold); }
html[data-tt-theme] .ai-note,
html[data-tt-theme] footer { color: var(--tt-muted); }
html[data-tt-theme] footer { border-color: var(--tt-border); }

/* Star News */
html[data-tt-theme] body:not(:has(.template-header)) {
  background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--tt-gold) 10%, transparent), transparent 66%), var(--tt-bg);
}
html[data-tt-theme] body:has(.mast) {
  --bg: var(--tt-bg); --card: var(--tt-surface); --card-2: var(--tt-raised);
  --ink: var(--tt-text); --ink-2: var(--tt-muted); --muted: var(--tt-muted);
  --ring: var(--tt-border); --gold: var(--tt-gold); --gold-2: var(--tt-gold-strong);
  --cyan: var(--tt-accent); --cyan-2: var(--tt-accent-strong);
  background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--tt-gold) 10%, transparent), transparent 66%), var(--tt-bg);
}
html[data-tt-theme] body:has(.mast) .kicker,
html[data-tt-theme] body:has(.mast) h2.seg { color: var(--tt-accent-strong); }
html[data-tt-theme] body:has(.mast) h1,
html[data-tt-theme] body:has(.mast) .lead .t { color: var(--tt-gold); text-shadow: none; }
html[data-tt-theme] body:has(.mast) .sub,
html[data-tt-theme] body:has(.mast) .lead .d,
html[data-tt-theme] body:has(.mast) .tile .name,
html[data-tt-theme] body:has(.mast) footer { color: var(--tt-muted); }
html[data-tt-theme] body:has(.mast) .lead,
html[data-tt-theme] body:has(.mast) .tile { background: var(--tt-surface); color: var(--tt-text); border-color: var(--tt-border); box-shadow: var(--tt-shadow); }
html[data-tt-theme] body:has(.mast) .lead { border-left-color: var(--tt-gold); }
html[data-tt-theme] body:has(.mast) .rule { background: var(--tt-border); }
html[data-tt-theme] body:has(.mast) footer a { color: var(--tt-accent-strong); }

/* Star Weather */
html[data-tt-theme] body:has(.wt-tabs) {
  --paper: var(--tt-bg); --panel: var(--tt-surface); --ink: var(--tt-text); --ink-soft: var(--tt-muted);
  --line: var(--tt-border); --line2: var(--tt-border); --accent: var(--tt-accent-strong);
  --accent-d: var(--tt-accent); --gold: var(--tt-gold); --warn: var(--tt-rust); --hair: var(--tt-border);
  --shadow: var(--tt-shadow); --shadow-h: var(--tt-shadow);
  background: radial-gradient(60vw 40vw at 82% -8%, color-mix(in srgb, var(--tt-accent) 9%, transparent), transparent 60%), var(--tt-bg);
}
html[data-tt-theme] body:has(.wt-tabs) #clock-time,
html[data-tt-theme] body:has(.wt-tabs) .masthead .wx,
html[data-tt-theme] body:has(.wt-tabs) .wt-tab:hover,
html[data-tt-theme] body:has(.wt-tabs) .bigtemp,
html[data-tt-theme] body:has(.wt-tabs) .period .pt,
html[data-tt-theme] body:has(.wt-tabs) .hour .ht,
html[data-tt-theme] body:has(.wt-tabs) .src { color: var(--tt-accent-strong); }
html[data-tt-theme] body:has(.wt-tabs) .dateline,
html[data-tt-theme] body:has(.wt-tabs) footer .src-line { color: var(--tt-gold); }
html[data-tt-theme] body:has(.wt-tabs) .tagline,
html[data-tt-theme] body:has(.wt-tabs) .loc,
html[data-tt-theme] body:has(.wt-tabs) .meta,
html[data-tt-theme] body:has(.wt-tabs) .muted,
html[data-tt-theme] body:has(.wt-tabs) footer { color: var(--tt-muted); }
html[data-tt-theme] body:has(.wt-tabs) .wt-tabs,
html[data-tt-theme] body:has(.wt-tabs) .card { background: var(--tt-surface); border-color: var(--tt-border); box-shadow: var(--tt-shadow); color: var(--tt-text); }
html[data-tt-theme] body:has(.wt-tabs) .wt-tab { color: var(--tt-muted); }
html[data-tt-theme] body:has(.wt-tabs) .wt-tab.active,
html[data-tt-theme] body:has(.wt-tabs) .maprow .seg button.on { background: var(--tt-accent-strong); border-color: var(--tt-accent-strong); color: #fff; }
html[data-tt-theme] body:has(.wt-tabs) .wt-loc-pick input,
html[data-tt-theme] body:has(.wt-tabs) .wt-loc-pick button,
html[data-tt-theme] body:has(.wt-tabs) .maprow .seg,
html[data-tt-theme] body:has(.wt-tabs) .maprow .seg button,
html[data-tt-theme] body:has(.wt-tabs) .maprow .play,
html[data-tt-theme] body:has(.wt-tabs) .hour { background: var(--tt-raised); color: var(--tt-text); border-color: var(--tt-border); }
html[data-tt-theme] body:has(.wt-tabs) .alert { background: var(--tt-surface); border-color: var(--tt-border); border-left-color: var(--tt-rust); }
html[data-tt-theme] body:has(.wt-tabs) .alert.minor { border-left-color: var(--tt-gold); }
html[data-tt-theme] body:has(.wt-tabs) .alert h4 { color: var(--tt-rust); }
html[data-tt-theme] body:has(.wt-tabs) .alert.minor h4 { color: var(--tt-warning); }
html[data-tt-theme="dark"] body:has(.wt-tabs) .metar { background: #171C19; color: #D4E7C2; }

/* StarTime */
html[data-tt-theme] body:has(#grid) {
  --navy: var(--tt-accent); --gold: var(--tt-gold); --cyan: var(--tt-accent-strong);
  --deep: var(--tt-bg); --ink: var(--tt-text); --dim: var(--tt-muted);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tt-accent) 14%, var(--tt-bg)), var(--tt-bg) 65%);
  color: var(--tt-text);
}
html[data-tt-theme] body:has(#grid) h1 { color: var(--tt-gold); text-shadow: none; }
html[data-tt-theme] body:has(#grid) .sub { color: var(--tt-accent-strong); }
html[data-tt-theme] body:has(#grid) .meta,
html[data-tt-theme] body:has(#grid) .cred,
html[data-tt-theme] body:has(#grid) .foot,
html[data-tt-theme] body:has(#grid) .empty { color: var(--tt-muted); }
html[data-tt-theme] body:has(#grid) figure { background: var(--tt-surface); border-color: var(--tt-border); box-shadow: var(--tt-shadow); }
html[data-tt-theme] body:has(#grid) figure img { background: var(--tt-raised); }
html[data-tt-theme] body:has(#grid) .cap,
html[data-tt-theme] body:has(#grid) #lb .lbcap { color: var(--tt-text); }
html[data-tt-theme] body:has(#grid) .topic { background: color-mix(in srgb, var(--tt-accent) 14%, var(--tt-surface)); border-color: var(--tt-accent); color: var(--tt-accent-strong); }
html[data-tt-theme] body:has(#grid) .foot a { color: var(--tt-accent-strong); }

/* Shared, keyboard-accessible theme control */
.tt-theme-toggle {
  position: fixed; top: 12px; right: 14px; z-index: 1100;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--tt-border); border-radius: 999px;
  background: var(--tt-surface); color: var(--tt-text);
  box-shadow: var(--tt-shadow); font: 600 13px/1.1 system-ui, sans-serif;
  cursor: pointer;
}
.tt-theme-toggle:hover { border-color: var(--tt-accent); }
.tt-theme-toggle .theme-icon { font-size: 16px; line-height: 1; }
@media (max-width: 560px) {
  .tt-theme-toggle { top: 8px; right: 8px; min-height: 36px; padding: 7px 10px; }
  html[data-tt-theme] .template-title { font-size: clamp(27px, 8vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-tt-theme] *, html[data-tt-theme] *::before, html[data-tt-theme] *::after {
    scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}
