/**
 * theme-transition.css — ease the colour change when the mode switches.
 *
 * This animates the TOKENS, not the elements. That is the whole idea, and it
 * took two wrong versions to get here, both recorded below so nobody rebuilds
 * them.
 *
 * ── Wrong version 1: transition on :root ────────────────────────────────────
 *
 *     :root { transition: background-color 400ms ease, color 400ms ease; }
 *
 *   Does nothing. A transition animates a property changing ON THE ELEMENT
 *   THAT DECLARES IT. Switching mode does not change :root's own background —
 *   it changes the custom properties :root holds. Measured: a child reading
 *   var(--surface--primary) went #ffffff -> #0d1826 in a single frame.
 *
 * ── Wrong version 2: transition on * ────────────────────────────────────────
 *
 *   Animates, but `color` is an INHERITED property, so every element in a
 *   chain ends up chasing its parent's already-animating value. The parent
 *   finishes, the child is still lagging, its target freezes, and a fresh
 *   transition starts from wherever it had got to. Measured on the hero text:
 *
 *       33ms  transitionstart color
 *      415ms  transitionend   color     <- parent done
 *      448ms  transitionstart color     <- child restarts, visible blink
 *      832ms  transitionend   color
 *
 *   That discontinuity is what read as "the text blinks". It hits any text
 *   that inherits its colour, which is most of the site.
 *
 *   Restricting the inherited properties to `body` alone fixes the echo but
 *   introduces something worse: the ~38 rules that declare their own
 *   token-driven `color` then snap at t=0 while the background eases over
 *   400ms. Going dark -> light that puts dark text on a still-dark background
 *   for most of the transition — a contrast hole, not just an aesthetic one.
 *
 * ── What actually works ─────────────────────────────────────────────────────
 *
 *   Register the semantic colour tokens as typed colours and transition the
 *   TOKENS. Every consumer — inheriting or declaring, text or background or
 *   border — reads a value that is already moving, so nothing needs a
 *   transition of its own and nothing can lag behind anything else. Text and
 *   background stay in step for the whole 400ms, so contrast holds throughout.
 *
 *   No `*` selector, so outside the switch this file costs nothing and never
 *   interferes with hover or focus transitions.
 *
 *   A custom property can only be transitioned once it has a registered type —
 *   an unregistered one is just a token string, and strings do not interpolate.
 *   Hence the @property block. `inherits: true` matches how Webflow's tokens
 *   already behave.
 *
 * ── Maintenance ─────────────────────────────────────────────────────────────
 *
 *   The names are Webflow-generated and the initial-values are the BASE (light)
 *   values as published on 2026-09-15. If a token is renamed or a new semantic
 *   colour is added, its registration must be added here or it will simply stop
 *   animating — it will not break, it will just cut instantly again.
 *
 *   initial-value cannot contain var(), so these must stay literal. They are
 *   only the fallback for an unparseable value; Webflow's own :root and .u-dark
 *   declarations still supply the real ones.
 *
 * ── Why not in the Designer ─────────────────────────────────────────────────
 *
 *   @property and prefers-reduced-motion are both outside what Webflow can
 *   author. Agreed with Katie 2026-09-15 before the file was created.
 */

@property --surface--primary        { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --surface--secondary      { syntax: '<color>'; inherits: true; initial-value: #f1f4f9; }
@property --surface--raised         { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --surface--inverse        { syntax: '<color>'; inherits: true; initial-value: #0d1826; }
@property --surface--inverse-raised { syntax: '<color>'; inherits: true; initial-value: #1f334e; }
@property --surface--accent         { syntax: '<color>'; inherits: true; initial-value: #4ca077; }
@property --surface--accent-subtle  { syntax: '<color>'; inherits: true; initial-value: #d6eede; }
@property --surface--static-inverse { syntax: '<color>'; inherits: true; initial-value: #fff; }

@property --text--primary           { syntax: '<color>'; inherits: true; initial-value: #0d1826; }
@property --text--secondary         { syntax: '<color>'; inherits: true; initial-value: #51565c; }
@property --text--tertiary          { syntax: '<color>'; inherits: true; initial-value: #6d7279; }
@property --text--inverse           { syntax: '<color>'; inherits: true; initial-value: #fcfdfe; }
@property --text--accent            { syntax: '<color>'; inherits: true; initial-value: #307e5b; }
@property --text--static-primary    { syntax: '<color>'; inherits: true; initial-value: #0d1826; }

@property --border--subtle          { syntax: '<color>'; inherits: true; initial-value: #e1e5ea; }
@property --border--interactive     { syntax: '<color>'; inherits: true; initial-value: #8e9299; }
@property --border--inverse         { syntax: '<color>'; inherits: true; initial-value: #fcfdfe; }
@property --border--accent          { syntax: '<color>'; inherits: true; initial-value: #307e5b; }

/**
 * The tokens are declared on :root and overridden by .u-dark, both of which
 * are <html> — so <html> is the element whose computed values change, and the
 * transition has to live there. mode-switch.js adds u-theme-anim for the
 * length of the switch and removes it again.
 *
 * Three of these are identical in both modes (surface/accent,
 * surface/static-inverse, text/static-primary). Listing them is harmless —
 * a property that does not change simply does not animate — and means they
 * are already covered if either ever becomes mode-aware.
 */
.u-theme-anim {
  transition-property:
    --surface--primary, --surface--secondary, --surface--raised,
    --surface--inverse, --surface--inverse-raised, --surface--accent,
    --surface--accent-subtle, --surface--static-inverse,
    --text--primary, --text--secondary, --text--tertiary,
    --text--inverse, --text--accent, --text--static-primary,
    --border--subtle, --border--interactive, --border--inverse,
    --border--accent;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Reduced motion: no transition at all. The mode still changes, it just
 * arrives instantly — the correct reduced-motion variant for a colour wash
 * rather than a slower one.
 *
 * mode-switch.js also skips adding the class, and reset.css collapses
 * transition durations globally. Three independent layers.
 */
@media (prefers-reduced-motion: reduce) {
  .u-theme-anim {
    transition-property: none;
  }
}