/* Storefront palette. Visitor-selected designs and the free editor stay independent. */
:root {
  color-scheme: only light;
  --bg: #f5f6f7;
  --panel: #ffffff;
  --panel-high: #dce1e5;
  --ink: #121416;
  --muted: #535b64;
  --accent: #245bff;
  --accent-hover: #1848d6;
  --action-ink: #ffffff;
  --line: #abb2bb;
  --field: #ffffff;
  --field-border: #848d97;
  --selected: #121416;
  --selected-ink: #ffffff;
  --silver: #dce1e5;
  --surface-hover: #cbd2d9;
  --focus: #245bff;
  --link-hover: #1848d6;
  --graphite: #121416;
  --dark-panel: #22262b;
  --dark-ink: #f5f6f7;
  --dark-muted: #c3cad2;
  --preview-accent: #245bff;
  --accent-text: #245bff;
  --tool-surface: #e9edf0;
  --preview-stage: #dce1e5;
}

:root[data-site-theme="dark"] {
  color-scheme: only dark;
  --bg: #121416;
  --panel: #1b1f24;
  --panel-high: #30363e;
  --ink: #f5f6f7;
  --muted: #bcc5cf;
  --line: #59636f;
  --field: #14171b;
  --field-border: #76818f;
  --selected: #dce1e5;
  --selected-ink: #121416;
  --silver: #272c33;
  --surface-hover: #3d4651;
  --focus: #9ab5ff;
  --link-hover: #b7caff;
  --accent-text: #9ab5ff;
  --tool-surface: #20252b;
  --preview-stage: #14171b;
}

html { scrollbar-color: #848d97 var(--bg); }
::selection { background: var(--accent); color: var(--action-ink); }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--focus);
}
.primary, .skip, #bag-count, #toast {
  background: var(--accent);
  color: var(--action-ink);
}
.primary:hover { background: var(--accent-hover); }
.secondary-button:hover, .icon-button:hover { background: var(--surface-hover); }
.text-button:hover { color: var(--link-hover); }
select option { background: var(--field); color: var(--ink); }

.header { background: var(--bg); }
.header nav a { color: var(--muted); }
.header nav a:hover, .header nav a.active { color: var(--accent-text); }
.appearance-toggle { background: var(--panel-high); }
.appearance-toggle[aria-checked=true] { color: var(--accent-text); }
.bag-button { background: var(--panel-high); }
.bag-button:hover { background: var(--surface-hover); }

/* Chrome artwork retains its dark stage and readable image overlays. */
.hero, .product-visual, .closing, .footer, #code-stage {
  color-scheme: dark;
  --ink: var(--dark-ink);
  --muted: var(--dark-muted);
  --panel-high: var(--dark-panel);
  --surface-hover: #343a42;
  --focus: #9ab5ff;
  --link-hover: #9ab5ff;
  color: var(--ink);
}
.hero-detail, .hero-foot { color: var(--dark-muted); }
.hero-foot a:hover { color: var(--link-hover); }
.quick-start select {
  background: var(--graphite);
  border-color: #66707c;
  color: var(--ink);
}
.quick-start select option { background: var(--graphite); color: var(--ink); }
.ticker { background: var(--silver); color: var(--ink); }
.ticker-group svg { color: var(--accent-text); }

.section-heading p, .product-description, .quote-note,
.case-copy p, .project-status, .founder-role,
.founder p:not(.founder-role), .faq details p { color: var(--muted); }
.filters button[aria-pressed=true] { background: var(--selected); color: var(--selected-ink); }
.product { background: var(--panel); }
.product-image-button:focus-visible { outline-color: var(--focus); }
.product-category { background: var(--graphite); }
.save-product { background: var(--dark-panel); }
.save-product[aria-pressed=true] { color: #9ab5ff; }
.save-product[aria-pressed=true] svg { fill: #9ab5ff; stroke: #9ab5ff; }
.configure-product { background: var(--panel-high); color: var(--ink); }
.configure-product:hover { background: var(--accent); color: var(--action-ink); }

.builder-section { background: var(--silver); color: var(--ink); }
.builder-section .section-heading p { color: var(--muted); }
.builder-launch .secondary-button { background: var(--graphite); color: var(--dark-ink); }
.builder-launch .secondary-button:hover { background: var(--accent-hover); }
.builder { background: var(--tool-surface); color: var(--ink); }
.builder-controls { background: var(--panel); }
.builder input:not([type=range]):not([type=checkbox]),
.builder select, .bag-body textarea {
  background: var(--field);
  border-color: var(--field-border);
  color: var(--ink);
}
.builder input::placeholder, .bag-body textarea::placeholder { color: var(--muted); }
.scope-description, .preview-caption { color: var(--muted); }
.segmented { background: var(--bg); }
.segmented button:hover { background: var(--panel-high); }
.segmented button[aria-pressed=true], .segmented button[aria-selected=true],
.device-switch button[aria-pressed=true] { background: var(--selected); color: var(--selected-ink); }
.color-theme { flex-wrap: wrap; }
.swatches { gap: 9px; }
.swatch { border: 1px solid var(--field-border); }
.swatch[aria-pressed=true]::after { border-color: var(--ink); }
.swatch.blue { background: var(--accent); }
.preview-stage { background: var(--preview-stage); }
#pages-output, .founder-mark { color: var(--accent-text); }
.site-preview {
  --preview-accent: #245bff;
  --preview-button-ink: #ffffff;
  --preview-bg: #121416;
  --preview-ink: #f5f6f7;
  --preview-muted: #c3cad2;
}
.site-preview.light {
  --preview-bg: #f5f6f7;
  --preview-ink: #121416;
  --preview-muted: #535b64;
}
.sample-cta { color: var(--preview-button-ink); }
.preview-caption .live-dot { background: var(--accent); }
#code-stage { background: var(--graphite); }
.code-filename { color: var(--dark-muted); }
pre { color: #afc5ff; }

.case-toolbar { background: var(--silver); }
.case-image-button { background: var(--silver); }
.zoom-icon { background: var(--graphite); }
.studio { background: var(--tool-surface); }
.faq details { background: var(--panel); }
.faq summary { font-size: 16px; }
.closing {
  background: var(--graphite);
  max-width: none;
  padding-inline: max(56px, calc((100% - 1568px) / 2));
}
.footer { background: var(--graphite); }
.footer > .icon-button { background: var(--dark-panel); }
.footer > .icon-button:hover { background: var(--surface-hover); }

dialog { color-scheme: inherit; background: var(--panel); color: var(--ink); }
.dialog-heading { background: var(--bg); }
.bag-item { border-color: var(--silver); }
.bag-item .small, .media-dialog > p { color: var(--muted); }
.bag-item-actions button { background: var(--panel-high); }
.bag-item-actions button:hover { background: var(--surface-hover); }
.notice { background: var(--tool-surface); color: var(--ink); }
.notice > svg { color: var(--accent-text); }
.media-dialog { background: var(--panel); }
.media-dialog > img { background: #030303; }
.noscript { background: var(--silver); color: var(--ink); }

@media (max-width: 1180px) {
  .closing { padding-inline: 32px; }
}
@media (max-width: 900px) {
  .header nav { background: var(--bg); }
}
@media (max-width: 680px) {
  .bag-button { background: transparent; }
  .closing { padding-inline: 22px; }
}
@media (max-width: 360px) {
  .closing { padding-inline: 18px; }
}