/* Shared color tokens keep every surface, including the canvas, in one theme. */
:root {
  color-scheme: dark;
  --muted-2: #8795a5;
  --surface: #0b1118;
  --surface-soft: #0b1017;
  --surface-hover: #131c26;
  --surface-raised: #16202a;
  --selected-bg: #172029;
  --border-strong: #344353;
  --panel-gradient: linear-gradient(180deg, #0f161f, #0b1118);
  --topbar-bg: rgba(8, 11, 16, .92);
  --tooltip-bg: rgba(10, 15, 21, .98);
  --body-copy: #b8c4cf;
  --badge-text: #aab7c5;
  --badge-bg: #1c2732;
  --warning-bg: #302818;
  --blue-bg: #19253a;
  --notice-text: #c4b485;
  --notice-bg: #221f16;
  --notice-border: #574b2c;
  --success-text: #9ab9ad;
  --success-bg: #1b2d23;
  --success-border: #2d483b;
  --verification-text: #9ebbc5;
  --verification-border: #293d48;
  --on-accent: #07100a;
  --price-up: #ff7b80;
  --price-down: #84ffb1;
  --chart-grid: rgba(127, 145, 162, .15);
  --chart-label: #94a3b8;
  --chart-fill-up: rgba(255, 123, 128, .18);
  --chart-fill-down: rgba(132, 255, 177, .18);
  --chart-event: #ffd978;
  --chart-event-halo: rgba(255, 217, 120, .14);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fa;
  --bg-soft: #edf2f7;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #d7e0e9;
  --line-soft: #e5ebf1;
  --text: #172638;
  --muted: #52647a;
  --muted-2: #64748b;
  --accent: #087c56;
  --accent-soft: rgba(8, 124, 86, .09);
  --danger: #c83142;
  --danger-soft: #fdecef;
  --warning: #865b08;
  --blue: #2d5cae;
  --shadow: 0 16px 44px rgba(32, 56, 80, .12);
  --surface: #f8fafc;
  --surface-soft: #f0f4f8;
  --surface-hover: #eaf0f5;
  --surface-raised: #edf2f7;
  --selected-bg: #e4f2eb;
  --border-strong: #b8c8d7;
  --panel-gradient: linear-gradient(180deg, #ffffff, #fcfdff);
  --topbar-bg: rgba(255, 255, 255, .94);
  --tooltip-bg: rgba(255, 255, 255, .98);
  --body-copy: #40536a;
  --badge-text: #52647a;
  --badge-bg: #edf2f7;
  --warning-bg: #fff1ce;
  --blue-bg: #eaf1ff;
  --notice-text: #765719;
  --notice-bg: #fff9e9;
  --notice-border: #e0d1a4;
  --success-text: #286448;
  --success-bg: #e6f3eb;
  --success-border: #b9dac6;
  --verification-text: #346675;
  --verification-border: #b9d3db;
  --on-accent: #ffffff;
  --price-up: #c83142;
  --price-down: #087c56;
  --chart-grid: rgba(71, 94, 120, .14);
  --chart-label: #52647a;
  --chart-fill-up: rgba(200, 49, 66, .14);
  --chart-fill-down: rgba(8, 124, 86, .14);
  --chart-event: #a77008;
  --chart-event-halo: rgba(167, 112, 8, .14);
}

.theme-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  background: var(--surface-soft);
}
.theme-switch button {
  border: 0;
  border-radius: 7px;
  padding: 7px 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.theme-switch button:hover { background: var(--surface-hover); color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--selected-bg); color: var(--accent); font-weight: 700; }
.search-wrap kbd { background: var(--surface-raised); }
.brand-mark, .primary-link { color: var(--on-accent); }
.positive { color: var(--price-up) !important; }
.negative { color: var(--price-down) !important; }
.chart-tooltip, .news-dialog { box-shadow: var(--shadow); }
.toast { background: var(--text); color: var(--bg); }
::selection { color: var(--text); background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot { animation: none; }
  .toast { transition: none; }
}