/* Typed palette interpolation keeps real controls interactive during the theme change. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f6f0e6; }
@property --warm { syntax: '<color>'; inherits: true; initial-value: #e5d5c1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #49362d; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #6d5547; }
@property --olive { syntax: '<color>'; inherits: true; initial-value: #66503c; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #cbbca9; }
@property --champagne { syntax: '<color>'; inherits: true; initial-value: #d9c5a5; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #faf5ec; }
@property --surface-alt { syntax: '<color>'; inherits: true; initial-value: #eee3d4; }
@property --surface-soft { syntax: '<color>'; inherits: true; initial-value: #e8dac6; }
@property --field { syntax: '<color>'; inherits: true; initial-value: #fbf7f0; }
@property --field-border { syntax: '<color>'; inherits: true; initial-value: #b7a58b; }
@property --accent-text { syntax: '<color>'; inherits: true; initial-value: #775b3e; }
@property --action-ink { syntax: '<color>'; inherits: true; initial-value: #fff8eb; }
@property --action-hover { syntax: '<color>'; inherits: true; initial-value: #4e3b2d; }
@property --focus { syntax: '<color>'; inherits: true; initial-value: #916224; }
@property --canvas-light { syntax: '<color>'; inherits: true; initial-value: #e3c8a645; }
@property --glass { syntax: '<color>'; inherits: true; initial-value: #fffaf0ae; }
@property --glass-edge { syntax: '<color>'; inherits: true; initial-value: #fffdf5bd; }
@property --glass-shadow { syntax: '<color>'; inherits: true; initial-value: #5a39251c; }
@property --card-shadow { syntax: '<color>'; inherits: true; initial-value: #51362830; }
@property --menu-surface { syntax: '<color>'; inherits: true; initial-value: #fbf4e6c9; }

:root[data-theme-transition='view']::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.2, .65, .25, 1);
}
:root[data-theme-transition='view']::view-transition-image-pair(root) {
  isolation: isolate;
}
:root[data-theme-transition='view']::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-theme-transition='view']::view-transition-new(root) {
  animation: lm-theme-crossfade 520ms cubic-bezier(.2, .65, .25, 1) both;
  mix-blend-mode: normal;
}
:root[data-theme-transition='view']::view-transition {
  pointer-events: none;
}
@keyframes lm-theme-crossfade { from { opacity: 0; } to { opacity: 1; } }

:root[data-theme-transition='fallback'] {
  transition-property: --paper, --warm, --ink, --muted, --olive, --line,
    --champagne, --surface, --surface-alt, --surface-soft, --field,
    --field-border, --accent-text, --action-ink, --action-hover, --focus,
    --canvas-light, --glass, --glass-edge, --glass-shadow, --card-shadow,
    --menu-surface;
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(.2, .65, .25, 1);
}
/* Browsers without registered colours still soften ordinary colours and surfaces. */
:root[data-theme-palette='basic'][data-theme-transition='fallback'] body,
:root[data-theme-palette='basic'][data-theme-transition='fallback'] body :is(.site-header, .mobile-nav,
    .theme-toggle, .menu-toggle, .selection-trigger, .button, .review-card,
    .price-panel, .filter, .site-footer, .gallery-dialog, .gallery-view,
    .dialog-close, input, select, textarea, h1, h2, h3, p, a) {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 520ms;
    transition-timing-function: cubic-bezier(.2, .65, .25, 1);
}
:root[data-theme-transition='fallback'] :is(.opening-brand img, .brand-logo),
:root[data-theme-transition='fallback'] body::before {
  transition: filter 520ms cubic-bezier(.2, .65, .25, 1), opacity 520ms cubic-bezier(.2, .65, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme-transition] { transition: none !important; }
  :root[data-theme-transition]::view-transition-group(root),
  :root[data-theme-transition]::view-transition-old(root),
  :root[data-theme-transition]::view-transition-new(root) {
    animation: none !important;
  }
}