/* =============================================================================
   Theme switching — everything changes at once.

   LAST in sj-core.css on purpose. Components carried their own transition
   durations, or none, so flipping the theme rippled: the page background moved
   first, then cards, then inputs, then buttons, roughly a tenth of a second
   apart. Two earlier attempts failed for measurable reasons:

     1. Scoped to html.theme-switching, added for 180ms around the change.
        Removing the class mid-transition let any element with a longer
        transition of its own carry on at its own rate — 317ms spread between
        the first and last element to settle.
     2. Unconditional, but declared in components.css. theme.css and nav.css are
        concatenated after it, so their transitions still won for the elements
        they style — 377ms spread.

   Declaring it last means nothing later can override it, and there is no class
   to add or remove.

   140ms linear: fast enough to feel immediate, slow enough to read as a
   crossfade rather than a snap, and linear so large colour jumps finish at the
   same moment as small ones. transform and opacity are excluded so hover lifts
   and skeleton pulses stay snappy.
   ========================================================================== */
html,
body,
*:not(svg):not(svg *) {
  transition:
    background-color var(--sj-theme-switch, 140ms) linear,
    border-color var(--sj-theme-switch, 140ms) linear,
    color var(--sj-theme-switch, 140ms) linear,
    fill var(--sj-theme-switch, 140ms) linear,
    stroke var(--sj-theme-switch, 140ms) linear;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  *:not(svg):not(svg *) { transition: none; }
}

/* The universal rule above has specificity (0,0,2) — `*:not(svg):not(svg *)` —
   so any component styled by a class selector (0,1,0) beats it and its own
   `transition` shorthand replaces the whole property list. That is what made
   cards flip instantly while the page background faded: home.css declares
   `.home-value-card { transition: transform, box-shadow, border-color }`.
   
   These families are re-declared at class specificity, and because this file is
   linked after every page stylesheet it wins. Each keeps the properties it
   actually animates on hover, with the colour properties added. */
.card,
.sj-card,
.home-value-card,
.stat-card,
.shop-stat-card,
.info-card,
.ov-include-card,
.ov-fact-card,
.testimonial-card,
.shop-sidebar-card,
.subscription-card,
.auth-card,
.course-card,
.shop-card,
.forum-card,
.btn,
.sj-btn,
.btn-icon,
.sj-btn-icon,
.input,
.sj-input,
.badge,
.sj-badge,
.hero-nav__link,
.sidepanel-nav a {
  transition:
    background-color var(--sj-theme-switch, 140ms) linear,
    border-color var(--sj-theme-switch, 140ms) linear,
    color var(--sj-theme-switch, 140ms) linear,
    fill var(--sj-theme-switch, 140ms) linear,
    stroke var(--sj-theme-switch, 140ms) linear,
    box-shadow var(--sj-duration, 220ms) var(--sj-ease, ease),
    transform var(--sj-duration, 220ms) var(--sj-ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .card, .sj-card, .home-value-card, .stat-card, .shop-stat-card, .info-card,
  .ov-include-card, .ov-fact-card, .testimonial-card, .shop-sidebar-card,
  .subscription-card, .auth-card, .course-card, .shop-card, .forum-card,
  .btn, .sj-btn, .btn-icon, .sj-btn-icon, .input, .sj-input, .badge, .sj-badge,
  .hero-nav__link, .sidepanel-nav a { transition: none; }
}