:root {
  color-scheme: light;
  --ink: #14205C;
  --brand-ink: #14205C;
  --brand-hover: #1A2B7A;
  --sidebar-bg: #14205C;
  --accent: #0878A3;
  --bg: #F3F5F9;
  --card: #FFFFFF;
  --control-bg: #FFFFFF;
  --border: #D5DAE5;
  --text: #1E2433;
  --text-muted: #60697A;
  --danger: #C92F43;
  --success: #177C53;
  --on-brand: #FFFFFF;
  --on-accent: #FFFFFF;
  --surface-subtle: #F5F8FE;
  --surface-hover: #F0F3F8;
  --surface-selected: #EAF6FC;
  --surface-neutral: #F1F2F6;
  --overlay: rgba(20, 32, 92, 0.35);
  --shadow: rgba(20, 32, 92, 0.15);
  --focus-ring: rgba(20, 166, 224, 0.28);
  --skeleton-base: #EEF0F5;
  --skeleton-highlight: #E0E4EC;
  --success-soft: #E6F7EE;
  --danger-soft: #FDEEF0;
  --danger-border: #E9ADB6;
  --warning-soft: #FFF4E5;
  --warning-text: #9A4E16;
  --group-market: #E8EEFC;
  --section-accent-bg: #EAF6FC;
  --section-accent-border: #CDEBF8;
  --section-ink-bg: #EEF0FA;
  --section-ink-border: #D9DCF2;
  --section-amber-bg: #FFF8EC;
  --section-amber-border: #F5E3C0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #DCE5FF;
  --brand-ink: #14205C;
  --brand-hover: #1D2D6B;
  --sidebar-bg: #101943;
  --accent: #42C5F5;
  --bg: #0E1422;
  --card: #171F30;
  --control-bg: #111827;
  --border: #354158;
  --text: #EDF1F8;
  --text-muted: #ACB5C7;
  --danger: #FF7B8A;
  --success: #57D7A1;
  --on-brand: #FFFFFF;
  --on-accent: #06151C;
  --surface-subtle: #1C2639;
  --surface-hover: #222D42;
  --surface-selected: #173A4C;
  --surface-neutral: #252E40;
  --overlay: rgba(2, 6, 16, 0.72);
  --shadow: rgba(0, 0, 0, 0.4);
  --focus-ring: rgba(66, 197, 245, 0.35);
  --skeleton-base: #263147;
  --skeleton-highlight: #354158;
  --success-soft: #173B31;
  --danger-soft: #45232B;
  --danger-border: #743541;
  --warning-soft: #44351F;
  --warning-text: #FFC47A;
  --group-market: #263658;
  --section-accent-bg: #173A4C;
  --section-accent-border: #285A70;
  --section-ink-bg: #252C4A;
  --section-ink-border: #3B456C;
  --section-amber-bg: #3A3021;
  --section-amber-border: #67502B;
}

.theme-toggle {
  min-width: 76px;
  white-space: nowrap;
}

.theme-toggle [data-theme-icon] {
  width: 1.1em;
  text-align: center;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  body, .card, .modal-box, .profile-dropdown, input, select, textarea, button {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
}