/* Theme control is shared by both catalogs; all assets stay on the site. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 9px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; white-space: nowrap; }
.theme-toggle:hover { background: var(--theme-control-hover, #edf1ef); }
.theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-focus, #438b79); outline-offset: 4px; }
@media (max-width: 900px) { .site-header nav { display: none; } }
@media (max-width: 650px) {
  .site-header { gap: 8px; }
  .header-actions { gap: 6px; }
  .theme-toggle { min-width: 40px; width: 40px; min-height: 40px; padding: 0; }
  .theme-toggle [data-theme-label] { display: none; }
  .header-actions .request-button, .header-actions .request-top { padding-inline: 8px; gap: 6px; }
}
@media (max-width: 370px) {
  .site-header { gap: 6px; }
  .site-header .brand { gap: 7px; font-size: 18px; }
  .site-header .brand > span { font-size: 18px; }
  .site-header .brand img { width: 32px; height: 32px; }
  .site-header .brand small { display: none; }
  .header-actions { gap: 5px; }
  .header-actions .request-button, .header-actions .request-top { font-size: 9px; padding-inline: 6px; }
}

@media (max-width: 360px) { [data-catalog="parts"] .category-list { margin-inline: -14px; padding-inline: 14px; } }

/* Charcoal, mint and warm metal for ZMK Line. */
:root[data-theme="dark"] {
  --ink: #e8f0ef; --muted: #a8b9bc; --mint: #a6d8c8;
  --paper: #101a23; --line: #30414b; --white: #172630; --brass: #d2b777;
  --theme-control-hover: #22363c; --theme-focus: #a6d8c8;
}
[data-theme="dark"] h2 > span { color: #a6d8c8; }
[data-theme="dark"] .demo-bar { background: #1b302c; color: #c0d8cc; }
[data-theme="dark"] .demo-label { border-color: #638578; }
[data-theme="dark"] nav a:hover,
[data-theme="dark"] .product-title:hover,
[data-theme="dark"] .contact-links a:hover { color: #a6d8c8; }
[data-theme="dark"] .request-top { border-color: #425d61; }
[data-theme="dark"] .selection-count { background: #2c4644; color: #c5e9de; }
[data-theme="dark"] .dot, [data-theme="dark"] .small-dot { background: #a6d8c8; }
[data-theme="dark"] .button.primary,
[data-theme="dark"] .button.light { background: #a6d8c8; color: #142d2c; }
[data-theme="dark"] .button.primary:hover,
[data-theme="dark"] .button.light:hover { background: #c0e9da; }
[data-theme="dark"] .button.outline { border-color: #55706d; }
[data-theme="dark"] .hero-visual { background-color: #1a2c32; background-image: linear-gradient(#a4c8bc0b 1px, transparent 1px), linear-gradient(90deg, #a4c8bc0b 1px, transparent 1px); }
[data-theme="dark"] .technical-ring { border-color: #8bb7a92e; }
[data-theme="dark"] .drawing-cross { color: #a8c5b9; }
[data-theme="dark"] .art-label,
[data-theme="dark"] .art-footnote { color: #afc8bd; }
[data-theme="dark"] .dimension { border-color: #6f998a; color: #bed5ca; }
[data-theme="dark"] .dimension::before,
[data-theme="dark"] .dimension::after { background: #6f998a; }
[data-theme="dark"] .dimension span { background: #1a2c32; }
[data-theme="dark"] .category-button small,
[data-theme="dark"] .category-number { color: #a6beb8; }
[data-theme="dark"] .category-button:hover { background: #20373b; }
[data-theme="dark"] .category-button.active { background: #2a4645; color: #ecf6f1; box-shadow: inset 3px 0 0 #a6d8c8; }
[data-theme="dark"] .category-button.active small,
[data-theme="dark"] .category-button.active .category-number { color: #bce4d4; }
[data-theme="dark"] .material-filter select { border-color: #42585d; background: #172630; }
[data-theme="dark"] .aside-note { background: #1c3032; }
[data-theme="dark"] .aside-note > span { color: #a6d8c8; }
[data-theme="dark"] .search-box,
[data-theme="dark"] .product-card { background: #172630; border-color: #30414b; }
[data-theme="dark"] .search-box:focus-within { outline-color: #a6d8c8; }
[data-theme="dark"] .product-card:hover { border-color: #708f86; }
[data-theme="dark"] .product-image { background: #213139; }
[data-theme="dark"] .sample-tag { background: #304942; color: #d0e7d9; }
[data-theme="dark"] .image-caption,
[data-theme="dark"] .product-code,
[data-theme="dark"] .catalog-notice,
[data-theme="dark"] .request-item small { color: #aabeb5; }
[data-theme="dark"] .product-material span { color: #94b3a5; }
[data-theme="dark"] .card-bottom { border-color: #30414b; }
[data-theme="dark"] .add-button { background: #29413f; color: #d4e9df; }
[data-theme="dark"] .add-button:hover,
[data-theme="dark"] .add-button.selected { background: #3c5e51; color: #f1f8f2; }
[data-theme="dark"] .empty-state { background: #1c2d32; }
[data-theme="dark"] .production-section { background: #182e36; color: #edf5f1; }
[data-theme="dark"] .production-layout p,
[data-theme="dark"] .production-layout p.production-note,
[data-theme="dark"] .production-steps p { color: #b7c9cd; }
[data-theme="dark"] .selection-bar { background: #1a2b34; border-color: #51695e; box-shadow: 0 12px 45px #0006; }
[data-theme="dark"] dialog { background: #172630; box-shadow: 0 20px 90px #0008; }
[data-theme="dark"] dialog::backdrop { background: #030a12c2; }
[data-theme="dark"] .dialog-close:hover { background: #30464a; }
[data-theme="dark"] .detail-art { background: #213139; }
[data-theme="dark"] .request-demo-note { background: #263e34; color: #cee3cd; }
[data-theme="dark"] .request-dialog label { color: #bdcfc8; }
[data-theme="dark"] .request-item input,
[data-theme="dark"] .request-fields input,
[data-theme="dark"] .request-dialog textarea { background: #101e27; color: #e8f0ef; border-color: #49605e; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #98adaf; opacity: 1; }
[data-theme="dark"] .toast,
[data-theme="dark"] .skip-link { background: #b7dfcf; color: #142d2c; }
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible { outline-color: #a6d8c8; }