/* One inherited palette drives the page, navigation and footer.
   Theme colors change atomically; only the sun/moon icons crossfade.
   Interpolating inverse text and surfaces would pass through low contrast. */
@property --bg-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --surface-color { syntax: "<color>"; inherits: true; initial-value: #f9f9f9; }
@property --text-primary { syntax: "<color>"; inherits: true; initial-value: #111111; }
@property --text-secondary { syntax: "<color>"; inherits: true; initial-value: #666666; }
@property --copyright-color { syntax: "<color>"; inherits: true; initial-value: #666666; }
@property --border-color { syntax: "<color>"; inherits: true; initial-value: #e5e5e5; }
@property --nav-glass { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.85); }
@property --nav-fallback { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.98); }
@property --logo-bg { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --logo-fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

:root {
  --theme-sync-duration: 200ms;
  --theme-sync-ease: cubic-bezier(.22,1,.36,1);
  --theme-icon-duration: var(--theme-sync-duration);
  --theme-icon-ease: var(--theme-sync-ease);
  --logo-bg: #000000;
  --logo-fg: #ffffff;
  --copyright-color: #666666;
}
html[data-theme="dark"] { --logo-bg: #ffffff; --logo-fg: #000000; --copyright-color: #8a8a8a; }

/* A quieter copyright in dark mode, with its own synchronized palette color. */
.site-footer p { color: var(--copyright-color); }

/* The inverse logo fills change with the palette, without a separate delay. */
.nav-logo-artwork, .nav-logo-artwork * { transition: none !important; }

/* Text, rules, SVG paths and generated content consume the same palette.
   Suppress inherited component color fades so foregrounds and surfaces
   change on the same frame. Existing non-color interactions remain available. */
html.theme-changing body,
html.theme-changing body *,
html.theme-changing body *::before,
html.theme-changing body *::after,
html.theme-changing body::before,
html.theme-changing body::after,
html.theme-changing input::placeholder,
html.theme-changing textarea::placeholder,
html.theme-changing li::marker {
  transition-property: opacity, transform, visibility !important;
  transition-duration: var(--theme-sync-duration) !important;
  transition-timing-function: var(--theme-sync-ease) !important;
  transition-delay: 0ms !important;
}
html.theme-changing ::-webkit-scrollbar-track,
html.theme-changing ::-webkit-scrollbar-thumb { transition: none !important; }

html.theme-palette-ready.theme-changing {
  /* An atomic palette keeps every frame in a complete, readable theme.
     Geometry, the glass mask and the 200ms icon fade are independent. */
  transition: none !important;
}
/* Keep the control anchored; only the two icons' opacity changes. */
[data-theme-toggle] { transform: none !important; }
html.theme-changing .icon-btn svg.theme-icon {
  transition-property: opacity !important;
  transition-duration: var(--theme-sync-duration) !important;
  transition-timing-function: var(--theme-sync-ease) !important;
  transition-delay: 0ms !important;
}

/* Frozen navigation layers keep their established handoff duration. */
html.theme-changing .route-freeze-layer { transition-duration: 175ms !important; }
@media (max-width:767px), (hover:none) and (pointer:coarse) {
  html.theme-changing .route-freeze-layer { transition-duration: 155ms !important; }
}

/* Initial/restored state, reduced motion and older-browser fallback are atomic. */
html.theme-changing.theme-instant,
html.theme-changing.theme-instant body,
html.theme-changing.theme-instant body *,
html.theme-changing.theme-instant body *::before,
html.theme-changing.theme-instant body *::after,
html.theme-changing.theme-instant input::placeholder,
html.theme-changing.theme-instant textarea::placeholder,
html.theme-changing.theme-instant li::marker { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root { --theme-sync-duration: 0ms; }
  html.theme-changing, html.theme-changing body, html.theme-changing body *,
  html.theme-changing body *::before, html.theme-changing body *::after,
  html.theme-changing input::placeholder, html.theme-changing textarea::placeholder,
  html.theme-changing li::marker { transition: none !important; }
}