/* This layer is loaded last. Device color changes the entire environment. */
@property --theme-h { syntax: '<number>'; inherits: true; initial-value: 35; }
@property --theme-s { syntax: '<number>'; inherits: true; initial-value: 48; }
@property --theme-lift { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --theme-glow { syntax: '<number>'; inherits: true; initial-value: .25; }

:root {
  --theme-h: 35;
  --theme-s: 48;
  --theme-lift: 1;
  --theme-glow: .25;
  --palette-scroll-shift: 0;
  --aurora-hue: calc(var(--theme-h) + var(--palette-scroll-shift));
  --theme-companion: calc(var(--aurora-hue) + 28);
  --bg: hsl(var(--theme-h) 28% calc(4.5% + var(--theme-lift) * 1%));
  --panel: hsl(var(--theme-h) 24% calc(8% + var(--theme-lift) * 1%));
  --ink: hsl(var(--theme-h) 18% 96%);
  --muted: hsl(var(--theme-h) 16% 67%);
  --line: hsl(var(--theme-h) 36% 78% / .14);
  --blue: hsl(var(--theme-h) calc(var(--theme-s) * 1%) 80%);
  --theme-accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) 77%);
  --theme-bright: hsl(var(--theme-h) calc(var(--theme-s) * .75%) 87%);
  --theme-button-ink: hsl(var(--theme-h) 22% 11%);
  --theme-tint: hsl(var(--theme-h) 22% 73%);
  --theme-border: hsl(var(--theme-h) 38% 70% / .29);
  --theme-soft: hsl(var(--theme-h) 35% 70% / .08);
  transition: --theme-h 1s cubic-bezier(.22, 1, .36, 1),
    --theme-s 1s ease, --theme-lift 1s ease, --theme-glow 1s ease;
}

body { background: var(--bg); }
.ambient-field { background: var(--bg); }
.ambient-field i:nth-child(1) {
  background: radial-gradient(ellipse, hsl(var(--aurora-hue) calc(var(--theme-s) * 1%) 58% / var(--theme-glow)), transparent 62%);
}
.ambient-field i:nth-child(2) {
  background: radial-gradient(ellipse, hsl(var(--theme-companion) calc(var(--theme-s) * 1%) 52% / calc(var(--theme-glow) * .75)), transparent 57%);
}
.ambient-field i:nth-child(3) {
  background: radial-gradient(ellipse, hsl(calc(var(--aurora-hue) - 22) calc(var(--theme-s) * 1%) 52% / calc(var(--theme-glow) * .65)), transparent 60%);
}
.stage-light { background: radial-gradient(ellipse at 50% 45%, hsl(var(--aurora-hue) calc(var(--theme-s) * 1%) 67% / .19), transparent 62%); }
.closing-glow { background: radial-gradient(ellipse, hsl(var(--aurora-hue) calc(var(--theme-s) * 1%) 63% / .22), transparent 62%); }
.page-progress { background: linear-gradient(90deg, var(--theme-accent), var(--theme-bright), hsl(var(--theme-companion) 60% 75%)); }
.header { background: hsl(var(--theme-h) 25% 6% / .7); border-color: var(--line); }
.brand-selector { background: hsl(var(--theme-h) 22% 12% / .78); border-color: var(--line); }
.collection { background: linear-gradient(180deg, hsl(var(--theme-h) 30% 11% / .36), hsl(var(--theme-h) 27% 8% / .8)); border-color: var(--line); }
.collection:before { background: linear-gradient(90deg, transparent, var(--theme-border), transparent); }
.ecosystem { background: hsl(var(--theme-h) 24% 8% / .46); }
.approach { background: hsl(var(--theme-h) 26% 7% / .4); }
.closing { background: linear-gradient(180deg, transparent, hsl(var(--theme-h) 26% 18% / .36)); }
.footer { background: hsl(var(--theme-h) 26% 4% / .78); }
.product-card, .accessory-card { background: linear-gradient(145deg, hsl(var(--theme-h) 29% 22% / .53), hsl(var(--theme-h) 23% 9% / .7)); border-color: var(--line); }
.product-card:hover, .accessory-card:hover { border-color: var(--theme-border); }
.accessory-card:hover { background: hsl(var(--theme-h) 27% 20% / .55); }
.product-photo:before { background: radial-gradient(ellipse, hsl(var(--aurora-hue) calc(var(--theme-s) * 1%) 76% / .16), transparent 66%); }
.product-photo.photo-white { background: linear-gradient(145deg, hsl(var(--theme-h) 16% 96%), hsl(var(--theme-h) 21% 88%)); }

.hero-word.iridescent-text {
  background-image: linear-gradient(100deg, var(--theme-accent) 15%, var(--theme-bright) 45%, hsl(var(--theme-companion) 44% 68%) 75%, var(--theme-accent));
}
.section-top h2 span, .collection .section-top h2 span, .approach h2 span,
.closing h2 span, .scene-story h2 span { color: var(--theme-accent); }
.live-dot { background: var(--theme-accent); box-shadow: 0 0 16px hsl(var(--theme-h) 65% 72% / .5); }
.eyebrow, .scene-story .eyebrow, .micro-label, .model-price, .card-link,
.story-open, .product-inspect, .cart-secondary, .cart-review-icon,
.product-card .card-brand, .cart-product-name:hover { color: var(--theme-accent); }
.hero-bottom-right i { background: var(--theme-soft); }
.hero-bottom-right i:after, .quiz-progress i.done { background: var(--theme-accent); }
.logo-mark i { background: var(--ink); }
.model-price:before { background: var(--theme-tint); }

.primary-cta, .cart-primary, .brand-selector button[aria-selected=true],
.collection-tabs button[aria-selected=true], #cart-count, .cart-toggle span,
.toast, .cart-toast { background: var(--theme-bright); color: var(--theme-button-ink); }
.primary-cta:hover, .cart-primary:hover { background: var(--ink); box-shadow: 0 6px 30px hsl(var(--theme-h) 55% 66% / .15); }
.primary-cta.is-added, .detail-bottom .primary-cta.is-added { background: var(--theme-accent); }
.product-add { border-color: var(--theme-border); color: var(--theme-bright); }
.product-add:hover { background: var(--theme-bright); color: var(--theme-button-ink); }
.storage-options button[aria-pressed=true] { border-color: var(--theme-accent); color: var(--theme-bright); background: var(--theme-soft); }
.swatch[aria-pressed=true]:after { border-color: var(--theme-bright); }
.ecosystem-tabs button[aria-selected=true] { color: var(--theme-bright); border-color: var(--theme-accent); }
.circle-button, .pill-button, .cart-close, .cart-quantity, .cart-secondary { border-color: var(--theme-border); }
.circle-button:hover, .pill-button:hover, .cart-close:hover, .cart-secondary:hover,
.quiz-options button:hover { background: var(--theme-soft); border-color: var(--theme-accent); }
.stage-loading span { border-color: var(--theme-border); border-top-color: var(--theme-bright); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
.cart-dialog button:focus-visible { outline-color: var(--theme-accent); }

.hero-copy, .hero-caption, .model-color, .detail-back, .detail-color-label,
.section-top>p, .card-copy p, .approach-list article p, .product-detail>p,
.scene-story>p, .spec dt, .spec dd, #story-highlights span, .stage-instruction,
.stage-index, .hero-bottom, .product-card .product-caption, .product-card-colors span,
.product-card-price small, .product-detail .source-link, .product-detail .source-link:hover,
.demo-price-label, .photo-note, .photo-source, .footer-main>span, .footer-bottom,
.closing-note, .footer .demo-footnote, .hero-price-demo, .availability span,
.modal-shell p, .modal-text-button, .request-summary span, .request-summary p,
.cart-eyebrow, .cart-description, .cart-demo-tag, .cart-configuration, .cart-total>span,
.cart-total-note, .cart-order-note, .cart-empty p, .cart-review>p, .cart-review-summary span,
.cart-back, .cart-remove { color: var(--muted); }
.spec dd, .detail-color-label span { color: var(--theme-bright); }
.availability strong { color: var(--ink); }
.modal-note, .cart-checkout-disclaimer { color: var(--muted)!important; }
.cart-empty>svg { color: var(--theme-accent); }

dialog { background: var(--panel); border-color: var(--theme-border); color: var(--ink); }
dialog::backdrop, .cart-dialog::backdrop { background: hsl(var(--theme-h) 25% 3% / .74); }
.cart-dialog { background: linear-gradient(145deg, hsl(var(--theme-h) 27% 13% / .98), hsl(var(--theme-h) 24% 7% / .99) 52%, hsl(var(--theme-h) 27% 11% / .99)); color: var(--ink); border-color: var(--line); }
.cart-footer { background: linear-gradient(hsl(var(--theme-h) 25% 11% / .97), hsl(var(--theme-h) 23% 9%)); border-color: var(--line); }
.cart-description, .cart-item, .cart-review-summary, .cart-review-summary>div,
.product-card-bottom, .cart-checkout-disclaimer { border-color: var(--line); }
.cart-thumbnail, .cart-review-icon { background: var(--theme-soft); border-color: var(--line); }
.cart-copy-field, .copy-fallback { background: var(--bg); border-color: var(--theme-border); color: var(--theme-bright); }
.cart-flying-device { box-shadow: 0 0 20px hsl(var(--theme-h) 60% 75% / .6); }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}