/* Shared theme layer. Existing styles remain the default dark appearance. */
.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #42543d;
  border-radius: 6px;
  background: #1d2a20;
  color: #c7dbb9;
  font: 500 11px/1 var(--font);
  white-space: nowrap;
  transition: background-color .18s, border-color .18s;
}
.theme-toggle:hover { background: #293d27; border-color: #829e6e; }
.theme-toggle [data-theme-icon] {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  font: 19px/1 var(--font);
}
.theme-toggle [data-theme-icon] svg { display: block; width: 18px; height: 18px; }
.theme-toggle:focus-visible { outline-offset: 4px; }
.header-actions { flex-shrink: 0; }
.desktop-nav a { white-space: nowrap; }

/* Warm off-white surfaces; forest green for actions, copper for small details. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #202b25;
  --ink-soft: #e0e5d9;
  --paper: #e8e7df;
  --paper-panel: #f1f0e8;
  --paper-text: #202b25;
  --paper-muted: #596457;
  --paper-heading: #202b25;
  --white: #202b25;
  --muted: #596457;
  --green: #3f6c48;

  --line: rgba(32, 43, 37, .18);
  --dark-line: #c1c8b9;
  --theme-hover: #dce5d3;
  --theme-field-line: #7f8d77;
}
:root[data-theme="light"] body { background: var(--paper); color: var(--paper-heading); }
:root[data-theme="light"] ::selection { background: #b7cfaa; color: #202b25; }
:root[data-theme="light"] :focus-visible { outline-color: var(--green); }
:root[data-theme="light"] :is(.site-header, .studio-page .site-header) {
  background: rgba(232, 231, 223, .97);
  color: var(--paper-heading);
  border-color: var(--dark-line);
}
:root[data-theme="light"] .mobile-nav { background: var(--paper-panel); }
:root[data-theme="light"] .theme-toggle {
  background: var(--paper-panel);
  color: var(--paper-heading);
  border-color: var(--theme-field-line);
}
:root[data-theme="light"] .theme-toggle:hover { background: var(--theme-hover); border-color: var(--green); }
:root[data-theme="light"] :is(.brand small, .desktop-nav, .desktop-nav a span, .preview-badge) { color: var(--paper-muted); }
:root[data-theme="light"] :is(.desktop-nav a:hover, .desktop-nav a[aria-current], .mobile-nav a:hover, .mobile-nav a[aria-current]) { color: var(--green); }
:root[data-theme="light"] .button-primary { background: var(--green); color: #f1f0e8; }
:root[data-theme="light"] .button-primary:hover { background: #31583a; color: #f1f0e8; }
:root[data-theme="light"] :is(.button-outline, .button-dark-outline) {
  color: var(--paper-heading);
  background: transparent;
  border-color: var(--theme-field-line);
}
:root[data-theme="light"] :is(.button-outline:hover, .button-dark-outline:hover) { background: var(--theme-hover); border-color: var(--green); }
:root[data-theme="light"] .skip-link { color: #f1f0e8; }
:root[data-theme="light"] .play-icon { border-color: var(--theme-field-line); }
:root[data-theme="light"] :is(.site-footer > p, .site-footer > div, .site-footer > div > span) { color: var(--paper-muted); }
:root[data-theme="light"] :is(.site-footer a:hover, .text-link:hover, .text-button:hover) { color: var(--green); }
:root[data-theme="light"] :is(.faq-section .eyebrow, details p) { color: var(--paper-muted); }
:root[data-theme="light"] summary > span { color: var(--green); }
:root[data-theme="light"] .closing-section { background: #dce5d3; border-color: #b8c7ae; }
:root[data-theme="light"] .closing-inner .eyebrow { color: var(--paper-muted); }

/* Studio home and contact. Screenshot frames retain their own dark palette. */
:root[data-theme="light"] :is(
  .studio-hero-top > span, .studio-lead, .studio-marquee,
  .studio-section-title p:not(.eyebrow), .studio-tool-copy p,
  .studio-tool-copy .tool-name, .studio-tool-copy .tool-status.upcoming,
  .game-copy p, .story-aside > p:last-child, .story-copy > p,
  .story-signature span, .doc-doorway p, .studio-contact p,
  .contact-columns p, .contact-columns li, .contact-directory
) { color: var(--paper-muted); }
:root[data-theme="light"] :is(.studio-marquee b, .story-signature) { color: var(--paper-heading); }
:root[data-theme="light"] .studio-tool-copy .tool-status { color: var(--green); }
:root[data-theme="light"] .beak-art {
  background: radial-gradient(ellipse at 49% 46%, #d7dfc9 0, #e8ebdf 50%, #f1f0e8 80%);
  border-color: var(--dark-line);
}
:root[data-theme="light"] .beak-art::before { border-color: #bdc9b2; }
:root[data-theme="light"] .beak-art > svg { color: #547347; filter: drop-shadow(0 15px 24px #48563821); }
:root[data-theme="light"] :is(.beak-caption, .beak-art .corner-index) { color: var(--paper-muted); }
:root[data-theme="light"] .studio-games { background: #e0e4d8; border-color: var(--dark-line); }
:root[data-theme="light"] .game-poster { background: var(--paper-panel); border-color: var(--dark-line); }
:root[data-theme="light"] .game-wordmark {
  background: repeating-linear-gradient(135deg, transparent 0 35px, #7f946427 35px 36px), #dce3cf;
  border-color: var(--dark-line);
}
:root[data-theme="light"] .game-wordmark strong { color: #3e5837; }
:root[data-theme="light"] :is(.game-wordmark .eyebrow, .game-wordmark > span:last-child) { color: var(--paper-muted); }
:root[data-theme="light"] .game-copy .eyebrow { color: var(--green); }
:root[data-theme="light"] .game-note { color: var(--paper-muted) !important; border-color: var(--dark-line); }
:root[data-theme="light"] :is(.doc-doorway, .contact-columns > section, .contact-directory) { border-color: var(--dark-line); }
:root[data-theme="light"] .studio-contact { background: #dce5d3; border-color: #b8c7ae; }
:root[data-theme="light"] .contact-email { border-color: #8ca182; }

/* UDB product page. */
:root[data-theme="light"] :is(
  .hero-description, .hero-margin, .compatibility-strip,
  .compatibility-strip > span:first-child, .uql-title .eyebrow,
  .uql-title > p:not(.eyebrow), .uql-preview-header .mono,
  .query-steps li > span, .query-steps p, .uql-caption,
  .edition-symbol, .edition-featured .edition-symbol,
  .edition-featured h3 span, .edition-featured > p,
  .edition-featured .edition-note, .release-note
) { color: var(--paper-muted); }
:root[data-theme="light"] .uql-preview { background: var(--paper-panel); border-color: var(--dark-line); }
:root[data-theme="light"] .status-label { background: #dce5d3; color: #3c603d; }
:root[data-theme="light"] .edition-featured { background: #dce5d3; color: var(--paper-heading); border-color: #91ab83; }
:root[data-theme="light"] .edition-featured ul { border-color: #b2c4a5; }
:root[data-theme="light"] .available { color: #345e3b; }

/* UQL product page. */
:root[data-theme="light"] :is(
  .uql-hero-lead, .uql-hero-note .eyebrow, .uql-hero-note > p:not(.eyebrow),
  .uql-scope-strip, .uql-scope-strip > span:first-child, .uql-section-heading .eyebrow,
  .uql-section-heading > p, .uql-workbench-bar .mono,
  .uql-example-tabs button, .uql-example-tabs button > span,
  .uql-code-label, .uql-code-note, .uql-result-column > .eyebrow,
  .uql-result-column > p:not(.eyebrow), .uql-result-column li > span,
  .uql-result-column li p, .uql-workbench-footer,
  .uql-capability-grid article > .mono, .uql-capability-grid p,
  .uql-agent-layout > div > .eyebrow, .uql-agent-layout > div > p:not(.eyebrow),
  .flow-number, .uql-agent-flow p, .uql-agent-flow > small,
  .uql-guide-steps > li > span, .uql-guide-steps p, .uql-guide-note p,
  .uql-suite-card > p, .uql-suite-card small
) { color: var(--paper-muted); }
:root[data-theme="light"] :is(
  .uql-result-column h3, .uql-result-column li strong,
  .uql-capability-grid h3, .uql-agent-flow strong, .uql-guide-steps h3,
  .uql-guide-note, .uql-suite-name, .uql-suite-card h3, .uql-suite-card ul
) { color: var(--paper-heading); }
:root[data-theme="light"] :is(.uql-command-tag, .flow-arrow, .uql-wordmark) { color: var(--green); }
:root[data-theme="light"] .uql-hero-note { border-color: var(--dark-line); }
:root[data-theme="light"] .uql-preview-label { color: #3c603d; background: #dce5d3; border-color: #b2c4a5; }
:root[data-theme="light"] .uql-workbench { background: var(--paper-panel); border-color: var(--dark-line); box-shadow: 0 25px 65px -40px #36422c40; }
:root[data-theme="light"] :is(.uql-workbench-bar, .uql-workbench-footer, .uql-example-tabs) { background: #e1e6d9; border-color: var(--dark-line); }
:root[data-theme="light"] .uql-example-tabs button[aria-selected="true"] { color: #315d39; background: #d4e0c9; border-bottom-color: var(--green); }
:root[data-theme="light"] .uql-example-tabs button:hover { background: #d7e1ce; }
:root[data-theme="light"] .uql-code-column { background: #e6eadf; border-color: var(--dark-line); }
:root[data-theme="light"] .uql-code-column pre { color: #35563b; scrollbar-color: #849574 transparent; }
:root[data-theme="light"] :is(.uql-code-note, .uql-result-column li) { border-color: var(--dark-line); }
:root[data-theme="light"] :is(.uql-agent-section, .uql-suite-section) { background: #dfe5d7; border-color: var(--dark-line); }
:root[data-theme="light"] :is(.uql-agent-flow > div, .uql-guide-note, .uql-suite-card) { background: var(--paper-panel); border-color: var(--dark-line); }
:root[data-theme="light"] .uql-guide-note { border-left-color: var(--green); }
:root[data-theme="light"] .uql-guide-steps code { color: #35563b; background: #dce5d3; }
:root[data-theme="light"] .uql-suite-bundle { background: #d4e0c9; border-color: #91ab83; }
:root[data-theme="light"] .uql-suite-card ul { border-color: #b5c4ab; }

/* UDB field guide: existing shared variables do most of the work. */
:root[data-theme="light"] :is(.guide-sidebar, .reference-sidebar) { scrollbar-color: #8b997d transparent; }
:root[data-theme="light"] .guide-start-links > a:hover { background: var(--theme-hover); }
:root[data-theme="light"] .guide-badge.dev { background: #e7ddcf; color: #705039; }
:root[data-theme="light"] .guide-badge.core { background: #dce5d3; color: #3c603d; }
:root[data-theme="light"] .guide-badge.planned { background: #e0e2d9; color: var(--paper-muted); }
:root[data-theme="light"] .topic-permalink > span { color: var(--green); }
:root[data-theme="light"] :is(.search-input-wrap input, .guide-filter-row select) { border-color: var(--theme-field-line); }
:root[data-theme="light"] :is(.guide-note, .docs-callout) { border-left-color: #6e8d58; }
:root[data-theme="light"] .version-mark { border-color: var(--theme-field-line); }

/* UQL searchable command reference, including generated cards and copy controls. */
:root[data-theme="light"] :is(
  .reference-contents > summary, .reference-nav-group a, .reference-nav-group button,
  .reference-nav-group button > span, .reference-hero .eyebrow, .reference-hero .lead,
  .reference-meta, .reference-version-note p, .reference-version-note > span,
  .reference-search-box > span, .reference-search-box kbd,
  .reference-category-field, .reference-search-suggestions,
  .reference-start-cards span, .reference-example-note,
  .reference-results-toolbar p, .reference-results-toolbar button,
  .reference-card-meta, .reference-card-description,
  .reference-card-body p, .reference-card-body li,
  .reference-code-toolbar, .reference-card-actions a,
  .reference-context > span, .reference-related > span,
  .reference-card-body .reference-source-note, .reference-empty p,
  .reference-help p
) { color: var(--paper-muted); }
:root[data-theme="light"] :is(
  .reference-nav-group h2, .reference-hero h1, .reference-version-note strong,
  .reference-controls > label, .reference-search-box input,
  .reference-category-field select, .reference-start-cards a,
  .reference-card summary strong, .reference-card-body strong,
  .reference-card-body h3, .reference-note > strong
) { color: var(--paper-heading); }
:root[data-theme="light"] :is(
  .reference-nav-group a:hover, .reference-nav-group button:hover,
  .reference-nav-group a[aria-current], .reference-search-suggestions #reference-clear,
  .reference-start-cards b, .reference-card[data-kind="command"] summary strong,
  .reference-card[data-kind="topic"] summary strong, .reference-card-body a,
  .reference-variant > summary, .reference-copy-status, .reference-help a
) { color: var(--green); }
:root[data-theme="light"] .reference-expand { color: var(--green) !important; }
:root[data-theme="light"] :is(
  .reference-version-note, .reference-start-cards a, .reference-context,
  .reference-note, .reference-search-box input, .reference-category-field select
) { background: var(--paper-panel); border-color: var(--dark-line); }
:root[data-theme="light"] :is(.reference-search-box input, .reference-category-field select, .reference-version-note > span) { border-color: var(--theme-field-line); }
:root[data-theme="light"] .reference-search-box input::placeholder { color: var(--paper-muted); }
:root[data-theme="light"] :is(
  .reference-search-box kbd, .reference-results-toolbar, .reference-card,
  .reference-related, .reference-variant, .reference-empty, .reference-help,
  .reference-sidebar
) { border-color: var(--dark-line); }
:root[data-theme="light"] .reference-kind-filters button { color: var(--paper-muted); border-color: var(--theme-field-line); }
:root[data-theme="light"] .reference-kind-filters button[aria-pressed="true"] { color: #f1f0e8; background: var(--green); border-color: var(--green); }
:root[data-theme="light"] .reference-kind-filters button:hover:not([aria-pressed="true"]) { background: var(--theme-hover); }
:root[data-theme="light"] :is(.reference-search-suggestions > button[data-search], .reference-related a) { color: #35563b; background: #dce5d3; border-color: #afc09f; }
:root[data-theme="light"] :is(.reference-search-suggestions > button[data-search]:hover, .reference-start-cards a:hover, .reference-related a:hover) { background: #d0dfc4; }
:root[data-theme="light"] :is(.reference-example-note code, .reference-card-body code) { color: #35563b; background: #dce5d3; }
:root[data-theme="light"] .reference-card-body pre { background: #e3e8dc; border-color: var(--dark-line); scrollbar-color: #849574 transparent; }
:root[data-theme="light"] .reference-card-body pre > code { color: #35563b; background: transparent; }
:root[data-theme="light"] .reference-card-body pre.reference-manual { color: #354334; }
:root[data-theme="light"] .reference-code-toolbar { background: #dce5d3; border-color: var(--dark-line); }
:root[data-theme="light"] .reference-code-toolbar button { color: #f1f0e8; background: var(--green); border-color: var(--green); }
:root[data-theme="light"] .reference-code-toolbar button:hover { background: #31583a; }
:root[data-theme="light"] .reference-context { border-left-color: var(--green); }
:root[data-theme="light"] .reference-module { color: #705039 !important; background: #e7ddcf; border-color: #cab799; }

/* Dark display islands keep screenshot and video surrounds familiar in light mode.
   Variables are reset locally, so image pixels and dialog controls stay readable. */
:root[data-theme="light"] :is(.product-stage, .tool-visual, dialog) {
  color-scheme: dark;
  --ink: #111915;
  --ink-soft: #18221d;
  --white: #f5f6ef;
  --muted: #b0bda8;
  --green: #c2ef91;
  --paper-heading: #dde4d8;
  --paper-text: #c4cec3;
  --paper-muted: #b0bda8;
  --line: rgba(225, 237, 223, .18);
  color: #dde4d8;
}
:root[data-theme="light"] .product-stage { background: #1b251e; border-color: #43583a; box-shadow: 0 25px 55px -35px #28332170; }
:root[data-theme="light"] .tool-visual { background: #151e17; border-color: #43583a; }
:root[data-theme="light"] :is(.tool-bar, .tool-visual-footer, .query-art .query-label, .query-art .note) { color: #b0bda8; }
:root[data-theme="light"] .query-art pre { color: #d0dfc5; }
:root[data-theme="light"] :is(.query-art .kw, .image-expand) { color: #c2ef91; }
:root[data-theme="light"] dialog { background: #18221d; border-color: #52664a; }
:root[data-theme="light"] dialog::backdrop { background: #182019bd; }
:root[data-theme="light"] dialog .button-primary { background: #c2ef91; color: #111915; }
:root[data-theme="light"] dialog .button-primary:hover { background: #d4f9af; color: #111915; }
:root[data-theme="light"] dialog .release-note { color: #b0bda8; }
:root[data-theme="light"] :is(.product-stage, .tool-visual, dialog) :focus-visible { outline-color: #c2ef91; }

/* The extra theme control fits beside five navigation links without crowding. */
@media (min-width: 801px) and (max-width: 1180px) {
  .header-inner, .studio-page .header-inner { gap: 18px; }
  .desktop-nav, .studio-page .desktop-nav { gap: 18px; font-size: 12px; }
  .header-actions { gap: 10px; }
  .header-actions > .button { padding-inline: 12px; gap: 14px; }
  .brand small { display: none; }
}
@media (min-width: 801px) and (max-width: 960px) {
  .desktop-nav, .studio-page .desktop-nav { gap: 13px; font-size: 11px; }
  .header-inner, .studio-page .header-inner { gap: 13px; }
  .theme-toggle { padding-inline: 9px; }
}
@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 800px) {
  }
@media (max-width: 600px) {
  .theme-toggle { width: 40px; min-width: 40px; height: 40px; padding: 0; gap: 0; }
  .theme-toggle [data-theme-label] { display: none; }
  .header-actions > .button { display: none; }
  .header-actions { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}