/* Cross-component transition polish. Palette/dark-mode values themselves
   live in tokens.css's :root / [data-theme=dark] blocks. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body, .site-header, .site-footer, .footer, .translation-container, .language-bar,
.text-area, .feature-card, .feature, .card, .ticket, .btn, .bootstrap-select .dropdown-toggle,
.bootstrap-select .dropdown-menu, .account-dropdown {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.theme-toggle { overflow: hidden; position: relative; }
.theme-toggle i { transition: transform 0.4s ease, opacity 0.4s ease; }
.theme-toggle .ri-sun-line { position: absolute; opacity: 0; transform: translateY(-30px) rotate(-90deg); }
.theme-toggle .ri-moon-line { opacity: 1; transform: translateY(0) rotate(0); display: inline; }
:root[data-theme="dark"] .theme-toggle .ri-sun-line { opacity: 1; transform: translateY(0) rotate(0); display: inline; }
:root[data-theme="dark"] .theme-toggle .ri-moon-line { opacity: 0; transform: translateY(30px) rotate(90deg); }