/* Shared appearance controls. Product art and app captures retain their colours. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-panel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line, #59675e); font-family: Manrope, system-ui, sans-serif; }
.theme-panel[hidden] { display: none; }
.theme-choice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; line-height: 1.5; color: inherit; }
.theme-choice select { font: inherit; min-height: 44px; min-width: 150px; max-width: 100%; padding: 9px 34px 9px 12px; border: 1px solid var(--theme-control-border, var(--line)); border-radius: 7px; background: var(--theme-control-bg, var(--surface, var(--paper))); color: var(--theme-control-ink, var(--ink)); cursor: pointer; }
.theme-choice select:focus-visible { outline: 3px solid var(--theme-control-focus, var(--accent, #9b7cbe)); outline-offset: 4px; }
.theme-panel .theme-help { margin: 0; max-width: 58ch; font-size: 12px; line-height: 1.7; color: var(--theme-control-muted, var(--muted)); }
.theme-help [data-theme-status] { display: inline-block; font-weight: 650; }
@media (max-width: 650px) { .theme-panel { align-items: flex-start; gap: 14px; } .theme-choice { width: 100%; justify-content: space-between; } .theme-panel .theme-help { max-width: 100%; } }
@media print { .theme-panel { display: none !important; } }

/* A quiet, non-modal introduction to the automatic appearance and its footer control. */
.theme-notice {
  position: absolute; z-index: 30; inset: auto 16px auto;
  width: calc(100% - 32px); max-width: 500px; box-sizing: border-box; margin: 10px auto 0;
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px;
  border: 1px solid var(--line, #d2d9cf); border-radius: 9px;
  background: var(--paper, #f7f7f2); color: var(--ink, #182c27);
  box-shadow: 0 6px 20px #0002; text-align: left;
  font: 13px/1.5 Manrope, system-ui, sans-serif;
  animation: theme-notice-enter 200ms cubic-bezier(.23, 1, .32, 1) both;
}
.theme-notice .theme-notice__copy { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.theme-notice strong { display: block; font: inherit; font-weight: 750; color: inherit; }
.theme-notice .theme-notice__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: inherit; font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 4px;
}
.theme-notice .theme-notice__short-label { display: none; }
.theme-notice .theme-notice__close {
  flex: 0 0 44px; display: grid; place-items: center; width: 44px; min-height: 44px;
  padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: inherit; cursor: pointer; font: 26px/1 system-ui, sans-serif;
}
.theme-notice :is(a, button):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.theme-notice .theme-notice__close:active { background: var(--soft, #e7ecdf); }
@media (hover: hover) and (pointer: fine) {
  .theme-notice .theme-notice__close:hover { border-color: currentColor; }
  .theme-notice .theme-notice__link:hover { text-decoration-thickness: 2px; }
}
@keyframes theme-notice-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .theme-notice { padding-left: 12px; }
  .theme-notice .theme-notice__copy { column-gap: 12px; }
  .theme-notice .theme-notice__label { display: none; }
  .theme-notice .theme-notice__short-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .theme-notice { animation: none; } }
@media print { .theme-notice { display: none !important; } }

/* RIFFSOURCE: forest greens, warm reading surfaces and clear utility pages. */
:root[data-product="riffsource"][data-theme="dark"] {
  --ink: #e8efe7; --muted: #adbcb2; --paper: #101b18; --deep: #101b18;
  --soft: #192b24; --card: #1b2d26; --accent: #a7d3b9; --line: #3b5146;
  background: var(--paper); color: var(--ink); scrollbar-color: #6b8779 var(--paper);
}
:root[data-product="riffsource"][data-theme="dark"] ::selection { background: #a7d3b9; color: #142b21; }
:root[data-product="riffsource"][data-theme="dark"] .button { background: #a7d3b9; border-color: #a7d3b9; color: #142b21; }
:root[data-product="riffsource"][data-theme="dark"] .button:hover { background: #c0e4ce; border-color: #c0e4ce; }
:root[data-product="riffsource"][data-theme="dark"] .button:active { background: #91bfa4; }
:root[data-product="riffsource"][data-theme="dark"] .button.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
:root[data-product="riffsource"][data-theme="dark"] .button.secondary:hover { background: var(--soft); border-color: var(--accent); }
:root[data-product="riffsource"][data-theme="dark"] .studio-project,
:root[data-product="riffsource"][data-theme="dark"] .content-page--support .support-grid .project-card,
:root[data-product="riffsource"][data-theme="dark"] .catalog-nav a { background: var(--card); }
:root[data-product="riffsource"][data-theme="dark"] .studio-project:is(:hover, :focus-within) { background: #223b30; border-color: #7a9b87; box-shadow: 0 10px 30px -20px #0008; }
:root[data-product="riffsource"][data-theme="dark"] .studio-project[data-stage="deferred"]::after { background: linear-gradient(to bottom, #1b2d2600, #1b2d26bb 48%, #1b2d26 92%); }
:root[data-product="riffsource"][data-theme="dark"] .studio-about,
:root[data-product="riffsource"][data-theme="dark"] .journal-disclosure,
:root[data-product="riffsource"][data-theme="dark"] .studio-project__pending { background: var(--soft); border-color: var(--line); }
:root[data-product="riffsource"][data-theme="dark"] .studio-project__pending::after { border-color: #7b967f; }
:root[data-product="riffsource"][data-theme="dark"] .studio-project__media > a,
:root[data-product="riffsource"][data-theme="dark"] .project-card__media > a,
:root[data-product="riffsource"][data-theme="dark"] .product-hero__media,
:root[data-product="riffsource"][data-theme="dark"] .development-hero__media,
:root[data-product="riffsource"][data-theme="dark"] .app-hero { background: #22352d; }
:root[data-product="riffsource"][data-theme="dark"] .studio-project__media--riff-pixel-studio > a { background: #1a1b20; }
:root[data-product="riffsource"][data-theme="dark"] .studio-project__media--the-distillers-path > a { background: #1c2f28; }
:root[data-product="riffsource"][data-theme="dark"] .studio-project__media--sirenstead > a { background: #365334; }
:root[data-product="riffsource"][data-theme="dark"] .status { background: #26392f; color: #c5d9be; border-color: #60785c; }
:root[data-product="riffsource"][data-theme="dark"] .status--released { background: #294331; color: #d3e7b9; border-color: #607953; }
:root[data-product="riffsource"][data-theme="dark"] .status--beta { background: #243e37; color: #bce0d1; border-color: #577d70; }
:root[data-product="riffsource"][data-theme="dark"] .status--planned { background: #383328; color: #e2d0a3; border-color: #807254; }
:root[data-product="riffsource"][data-theme="dark"] .status--paused { background: transparent; color: var(--muted); border-color: var(--line); }
:root[data-product="riffsource"][data-theme="dark"] .journal-body :is(p, ul, ol) { color: var(--muted); }
:root[data-product="riffsource"][data-theme="dark"] .brand-mark { outline: 1px solid #526d60; }

/* RiffStage: the studio's lilac identity, with an ink-coloured outer canvas. */
:root[data-product="riffstage"][data-theme="dark"] {
  --paper: #17151f; --surface: #211e2b; --ink: #f2edf9; --muted: #bcb4ce;
  --line: #484154; --accent: #c2a8ff; --accent-dark: #d5c3ff; --soft: #2a2436;
}
:root[data-product="riffstage"][data-theme="dark"] .button { color: #241936; }
:root[data-product="riffstage"][data-theme="dark"] .capture-link { background: #24212c; border-color: #625570; box-shadow: 0 20px 65px #08050f55; }
:root[data-product="riffstage"][data-theme="dark"] .hero-capture::before { background: radial-gradient(ellipse, #63499144 0%, transparent 68%); }
:root[data-product="riffstage"][data-theme="dark"] .status-label { background: #2a223c; border-color: #6b558e; color: #d6bfff; }
:root[data-product="riffstage"][data-theme="dark"] .plan.featured { background: #2a223c; border-color: #8265ac; }
:root[data-product="riffstage"][data-theme="dark"] .closing { border-color: var(--line); }
:root[data-product="riffstage"] .clip:nth-child(2),
:root[data-product="riffstage"] .track-clips .voice { color: #17151f; }

/* Pixel Studio: warm charcoal, lavender and the brush's golden accent. */
:root[data-product="riff-pixel-studio"][data-theme="dark"] {
  --paper: #151b19; --ink: #eef1e9; --muted: #b5c1b7; --line: #43544a;
  --purple: #c8acee; --lime: #f5d178; --dark: #1c1b23;
}
:root[data-product="riff-pixel-studio"][data-theme="dark"] .hero { background-image: radial-gradient(#455247 .8px, transparent .8px); }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .hero-eyebrow { background: #2c2836; color: #dec5f4; border-color: #a781ca; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .hero h1 span,
:root[data-product="riff-pixel-studio"][data-theme="dark"] .number { color: #c8acee; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .skip { color: #241936; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .attribution { background: #292632; border-color: #a781ca; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .download { background: #192923; border-color: var(--line); }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .download-grid,
:root[data-product="riff-pixel-studio"][data-theme="dark"] .download-card details,
:root[data-product="riff-pixel-studio"][data-theme="dark"] .pending { border-color: #718378; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .download-card:first-child { background: #282535; border-color: #71627f; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .version span { background: #c8acee; color: #241936; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .button { box-shadow: 4px 4px 0 #59436e; }
:root[data-product="riff-pixel-studio"][data-theme="dark"] .detail-capture { box-shadow: 7px 7px 0 #403348; }
:root[data-product="riff-pixel-studio"] .footer .theme-panel { --theme-control-bg: #203a34; --theme-control-ink: #faf7ef; --theme-control-muted: #cedbd1; --theme-control-border: #81988a; --theme-control-focus: #f5d178; border-color: #53685d; }
:root[data-product="riff-pixel-studio"] .footer .theme-choice select { color-scheme: dark; }
@media (hover: hover) and (pointer: fine) {
  :root[data-product="riff-pixel-studio"][data-theme="dark"] .top nav a:hover,
  :root[data-product="riff-pixel-studio"][data-theme="dark"] .text-link:hover { color: #d9bdf8; }
}