/* Every product override is scoped to Colorful. Light/Dark retain Dev rules. */
:root[data-theme="colorful"] {
  color-scheme: dark;
  --theme-bg: #10261b;
  --theme-surface: #183324;
  --theme-raised: #10261b;
  --theme-hover: #294935;
  --theme-ink: #f1f8ef;
  --theme-text: #e0ece3;
  --theme-muted: #c5d8ca;
  --theme-line: #496551;
  --theme-control: #8aab91;
  --theme-accent: #bdeac2;
  --theme-heart: #ffa3aa;
  --theme-logo: invert(1);
}
:root[data-theme="colorful"] body { position: relative; isolation: isolate; background: transparent; }
:root[data-theme="colorful"] body::before,
:root[data-theme="colorful"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
:root[data-theme="colorful"] body::before { z-index: -2; background: url('./nature/forest-summer.webp?v=1') center / cover no-repeat; }
:root[data-theme="colorful"][data-nature="meadow"] body::before { background-image: url('./nature/meadow-summer.webp?v=1'); }
:root[data-theme="colorful"][data-nature="leaves"] body::before { background-image: url('./nature/leaves-summer.webp?v=1'); }
:root[data-theme="colorful"] body::after { z-index: -1; background: rgba(3, 15, 8, .16); }

:root[data-theme="colorful"] body .site-header,
:root[data-theme="colorful"] body .help-header,
:root[data-theme="colorful"] body .site-footer,
:root[data-theme="colorful"] body .help-footer {
  background: rgba(var(--season-panel), .6);
  backdrop-filter: blur(8px) brightness(.65);
  -webkit-backdrop-filter: blur(8px) brightness(.65);
  border-color: var(--theme-line);
}
:root[data-theme="colorful"] body .hero > div:first-child {
  padding: clamp(22px, 3vw, 36px); border: 1px solid rgba(217, 239, 217, .24);
  border-radius: 22px; background: rgba(var(--season-panel), .66); backdrop-filter: blur(4px);
  box-shadow: 0 16px 48px #03100820;
}
:root[data-theme="colorful"] body .family-card,
:root[data-theme="colorful"] body .product-panel,
:root[data-theme="colorful"] body .tools-preview,
:root[data-theme="colorful"] body .product-visual {
  background: rgba(var(--season-card), .75); backdrop-filter: blur(4px);
  box-shadow: 0 16px 48px #03100830;
}
:root[data-theme="colorful"] body .section:not(.hero),
:root:root[data-theme="colorful"] body .help-layout,
:root:root[data-theme="colorful"] body .notes-main,
:root:root[data-theme="colorful"] body .page,
:root:root[data-theme="colorful"] body .notes-page {
  background: rgba(var(--season-panel), .78);
}
:root[data-theme="colorful"] body .product,
:root[data-theme="colorful"] body .note-entry,
:root[data-theme="colorful"] body .note-card { background: rgba(var(--season-panel), .78); }
:root[data-theme="colorful"] :where(body) article:is(.features article):nth-child(n),
:root[data-theme="colorful"] :where(body) section:is(.trust-grid section):nth-child(n),
:root[data-theme="colorful"] body:is(body) .principle:nth-child(n) {
  color: var(--theme-ink); background: rgba(var(--season-card), .78);
}
:root[data-theme="colorful"] body .button.primary,
:root:root[data-theme="colorful"] body .header-action,
:root:root[data-theme="colorful"] body .skip-link,
:root:root[data-theme="colorful"] body .ta-play-launch,
:root[data-theme="colorful"] body.theme-lab .btn.primary,
:root[data-theme="colorful"] body.theme-lab .btn.active,
:root[data-theme="colorful"] body.theme-lab .toggle.on,
:root[data-theme="colorful"] body.theme-lab .chip.selected {
  background: var(--theme-accent); border-color: var(--theme-accent); color: #112019;
}
:root[data-theme="colorful"] body .button.primary:hover,
:root[data-theme="colorful"] body .button.primary:focus-visible,
:root:root[data-theme="colorful"] body .header-action:hover,
:root:root[data-theme="colorful"] body .header-action:focus-visible,
:root:root[data-theme="colorful"] body .ta-play-launch:hover,
:root:root[data-theme="colorful"] body .ta-play-launch:focus-visible {
  background: var(--season-button-hover); border-color: var(--season-button-hover); color: #112019;
}
:root[data-theme="colorful"] body .eyebrow,
:root[data-theme="colorful"] body .section-id,
:root[data-theme="colorful"] body .release-label,
:root[data-theme="colorful"] body .patch-version { color: var(--theme-accent); }
:root[data-theme="colorful"] body .theme-toggle { background: var(--theme-surface); border-color: var(--theme-control); }
:root[data-theme="colorful"] body .theme-swatch-colorful { background: var(--theme-hover); color: var(--theme-accent); border-color: var(--theme-control); }
:root[data-theme="colorful"] body .theme-menu {
  background: rgba(var(--season-panel), .6);
  backdrop-filter: blur(8px) brightness(.65);
  -webkit-backdrop-filter: blur(8px) brightness(.65);
}
:root[data-theme="colorful"] body .theme-option[aria-checked="true"] { background: rgba(var(--season-card), .52); }
:root[data-theme="colorful"] body .theme-option:hover,
:root[data-theme="colorful"] body .theme-option:focus-visible { background: rgba(var(--season-card), .75); }
/* Browsers without backdrop filtering keep readable surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="colorful"] body .theme-menu,
:root[data-theme="colorful"] body .site-header,
:root[data-theme="colorful"] body .help-header,
:root[data-theme="colorful"] body .site-footer,
:root[data-theme="colorful"] body .help-footer { background: rgba(var(--season-panel), .88); }
}
:root[data-theme="colorful"] body .help-section,
:root[data-theme="colorful"] body .help-hero,
:root[data-theme="colorful"] body .notes-header,
:root[data-theme="colorful"] body .notes-intro {
  background: rgba(var(--season-panel), .82);
}
:root[data-theme="colorful"] body .help-page > .note-meta {
  padding: 12px 16px; border: 1px solid var(--theme-line); border-radius: 12px;
  background: rgba(var(--season-panel), .82);
}
:root[data-theme="colorful"] body main.shell {
  margin-block: 28px; padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--theme-line); border-radius: 20px; background: rgba(var(--season-panel), .82);
}
:root[data-theme="colorful"] body.theme-error main { padding: 28px; border-radius: 20px; background: rgba(var(--season-panel), .82); }

@media (max-width: 600px) {
  :root[data-theme="colorful"] body .hero > div:first-child { padding: 20px; border-radius: 16px; }
  :root[data-theme="colorful"] body .hero h1 { font-size: clamp(32px, 9.5vw, 42px); line-height: 1.08; }
  :root[data-theme="colorful"] body main.shell { padding: 22px 18px; border-radius: 16px; }
  .nature-preview p { display: none; }
  :root[data-theme="colorful"] .nature-preview:not([hidden]) { bottom: 10px; left: 10px; padding: 5px; border-radius: 13px; }
  .nature-preview button { min-width: 56px; padding-inline: 8px; font-size: 12px; }
}

/* Seasonal tokens use the same 34% / 25% glass as the approved summer design. */
:root[data-theme="colorful"] { --season-panel: 7, 24, 14; --season-card: 10, 29, 18; --season-button-hover: #d5f5d9; }
:root[data-theme="colorful"][data-season="spring"] {
  --season-panel: 10, 25, 12; --season-card: 16, 35, 16;
  --theme-bg: #162914; --theme-surface: #253e20; --theme-raised: #162914; --theme-hover: #36542c;
  --theme-ink: #f3faec; --theme-text: #e6f0dc; --theme-muted: #d0dfc2;
  --theme-line: #55734a; --theme-control: #9fbb8f; --theme-accent: #d0edaa;
  --season-button-hover: #e4f7cc;
}
:root[data-theme="colorful"][data-season="autumn"] {
  --season-panel: 30, 19, 10; --season-card: 38, 25, 14;
  --theme-bg: #2d2118; --theme-surface: #3c2a1d; --theme-raised: #2d2118; --theme-hover: #563d28;
  --theme-ink: #fff7eb; --theme-text: #f0e0c7; --theme-muted: #e2cfb4;
  --theme-line: #786046; --theme-control: #ad9275; --theme-accent: #f6c57a;
  --season-button-hover: #ffdfac;
}
:root[data-theme="colorful"][data-season="winter"] {
  --season-panel: 12, 25, 34; --season-card: 18, 32, 43;
  --theme-bg: #18252e; --theme-surface: #243842; --theme-raised: #18252e; --theme-hover: #344e5b;
  --theme-ink: #f3f8fc; --theme-text: #deebf3; --theme-muted: #d0dfe8;
  --theme-line: #546e7d; --theme-control: #91adbd; --theme-accent: #cae6f5;
  --season-button-hover: #e5f4ff;
}

:root[data-theme="colorful"][data-season="spring"][data-nature="forest"] body::before { background-image: url('./nature/forest-spring.webp?v=1'); }
:root[data-theme="colorful"][data-season="spring"][data-nature="meadow"] body::before { background-image: url('./nature/meadow-spring.webp?v=1'); }
:root[data-theme="colorful"][data-season="spring"][data-nature="leaves"] body::before { background-image: url('./nature/leaves-spring.webp?v=1'); }
:root[data-theme="colorful"][data-season="autumn"][data-nature="forest"] body::before { background-image: url('./nature/forest-autumn.webp?v=1'); }
:root[data-theme="colorful"][data-season="autumn"][data-nature="meadow"] body::before { background-image: url('./nature/meadow-autumn.webp?v=1'); }
:root[data-theme="colorful"][data-season="autumn"][data-nature="leaves"] body::before { background-image: url('./nature/leaves-autumn.webp?v=1'); }
:root[data-theme="colorful"][data-season="winter"][data-nature="forest"] body::before { background-image: url('./nature/forest-winter.webp?v=1'); }
:root[data-theme="colorful"][data-season="winter"][data-nature="meadow"] body::before { background-image: url('./nature/meadow-winter.webp?v=1'); }
:root[data-theme="colorful"][data-season="winter"][data-nature="leaves"] body::before { background-image: url('./nature/leaves-winter.webp?v=1'); }
@media (forced-colors: active) {
  :root[data-theme="colorful"] body .theme-menu,
:root[data-theme="colorful"] body .site-header,
:root[data-theme="colorful"] body .help-header,
:root[data-theme="colorful"] body .site-footer,
:root[data-theme="colorful"] body .help-footer {
    background: Canvas; color: CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :root[data-theme="colorful"] body::before,
:root[data-theme="colorful"] body::after { display: none; }
  :root[data-theme="colorful"] body { background: Canvas; color: CanvasText; }
}