/* Optional dark palette. Light-mode layout, imagery and colors stay untouched. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171b16;
  --white: #242a21;
  --ink: #f5f3ea;
  --muted: #bcc4b4;
  --line: #77836b;
  --lime: #d8fa60;
  --lavender: #302d3b;
  --orange: #413025;
  --ns-bg: var(--paper);
  --ns-card: var(--white);
  --ns-ink: var(--ink);
  --ns-muted: var(--muted);
  --ns-line: var(--line);
  --ns-orange: var(--lime);
  --ns-tint: #303a24;
  --ns-shadow: 5px 5px 0 #080b07;
  --theme-focus: #b4d840;
}

html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] ::selection { background: #d8fa60; color: #20231f; }
html[data-theme="dark"] :is(button, a, input, select, textarea, summary):focus-visible {
  outline-color: var(--theme-focus);
}
html[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #adb6a3; opacity: 1; }

/* The existing lime blocks retain dark lettering and their original button palette. */
html[data-theme="dark"] :where(
  .button-lime, .brand-mark, .skip-link, .cta-band,
  .nav-dropdown .nav-all-services, .nav-dropdown a:hover,
  .hero-copy h1 em, .studio-sticker, .work-board, .app-sidebar .active,
  .home-price-card:nth-child(2), .web-studio-note .tag,
  .service-card:first-child, .service-illustration,
  .web-hero h1 em, .web-starting-price, .web-project-electric, .web-benefit-number,
  .portfolio-hero h1 em, .portfolio-bridge, .demo-card[data-category="exterior"] .demo-card-top,
  .commerce-hero h1 em, .commerce-art .commerce-action, .commerce-price-card,
  .brand-hero h1 em, .brand-kit-mark, .brand-price-social,
  .growth-hero h1 em, .growth-node-accent, .growth-lime,
  .growth-single-summary, .growth-plan-featured,
  .inventory-hero h1 em, .inventory-concept-header .tag, .inventory-scan-strip,
  .catalog-hero h1 em, .solutions-schematic, .solutions-number,
  .solutions-case-visual, .solutions-tool-symbol, .solutions-highlight,
  .hosting-highlight, .hosting-rack-row:nth-child(2), .hosting-route:hover,
  .hosting-directory a:hover, .nc-intro h1 span, .nc-selection,
  .nl-languages a[aria-current="true"],
  .ns-hero h1 span, .ns-hero-visual-head, .ns-hero-visual:hover .ns-hero-visual-foot,
  .ns-button-primary, .ns-cart .button, .ns-help, .ns-fit-callout, .ns-cart-head,
  .ns-cart-trigger:hover, .ns-filter:hover:not(.is-active), .ns-related-links a:hover
) {
  --paper: #f5f3ea;
  --white: #fffefa;
  --ink: #20231f;
  --muted: #4e593f;
  --line: #20231f;
  --lavender: #e6e1f5;
  --orange: #ffc49d;
  --ns-bg: #f5f3ea;
  --ns-card: #fffefa;
  --ns-ink: #20231f;
  --ns-muted: #4e593f;
  --ns-line: #20231f;
  --theme-focus: #35451a;
  color: #20231f;
  color-scheme: light;
}

/* Keep existing dark sections dark when --ink changes to the reading color. */
html[data-theme="dark"] :is(
  .site-footer, .web-paths-section, .web-project-tires, .commerce-kicker,
  .brand-detail-section, .brand-kit-message, .growth-strip,
  .inventory-workflow-section, .solutions-callout
) { background: #10140f; color: #f5f3ea; }
html[data-theme="dark"] .site-footer :is(.brand-name, .brand-name small) { color: #f5f3ea; }
html[data-theme="dark"] .brand-kit-message p { color: #f5f3ea; }
html[data-theme="dark"] .site-footer :is(p, h2, .footer-bottom) { color: #bcc4b4; }
html[data-theme="dark"] .footer-bottom { border-color: #414b38; }
html[data-theme="dark"] .button-dark {
  background: #d8fa60;
  color: #20231f;
  border-color: #20231f;
  box-shadow: 4px 4px 0 #080b07;
}
html[data-theme="dark"] .button-dark:hover { box-shadow: 2px 2px 0 #080b07; }
html[data-theme="dark"] :is(.cta-band, .home-price-card:nth-child(2), .commerce-price-card,
  .brand-price-social, .growth-single-summary, .growth-plan-featured, .growth-lime,
  .portfolio-bridge, .service-illustration, .solutions-schematic) .button-dark {
  background: #20231f;
  color: #fffefa;
}
html[data-theme="dark"] :is(.button:not(.button-dark):not(.button-lime), .menu-toggle) {
  border-color: var(--line);
}
html[data-theme="dark"] .button:not(.button-dark):not(.button-lime) {
  box-shadow: 4px 4px 0 #080b07;
}
html[data-theme="dark"] .button:not(.button-dark):not(.button-lime):hover {
  box-shadow: 2px 2px 0 #080b07;
}
html[data-theme="dark"] :is(.site-header, .site-nav, .nav-dropdown) { border-color: #77836b; }
html[data-theme="dark"] .nav-dropdown { box-shadow: 5px 5px 0 #080b07; }
html[data-theme="dark"] .nav-dropdown a { border-color: #414b38; }

/* Subtle alternate surfaces preserve the original section hierarchy. */
html[data-theme="dark"] :is(.proof-strip, .web-proof-section, .work-section,
  .catalog-section:nth-of-type(odd), .growth-pricing) { background: #20261c; }
html[data-theme="dark"] .demo-section { background: #24251f; }
html[data-theme="dark"] :is(.home-more-card:last-child, .service-card:nth-child(3)) {
  background: #2b3323;
}
html[data-theme="dark"] .app-chrome { background: #333d2b; }
html[data-theme="dark"] .app-sidebar { background: #20261c; }
html[data-theme="dark"] .mini-add { background: #d8fa60; color: #20231f; }
html[data-theme="dark"] .sample-search { color: #bcc4b4; border-color: #77836b; }
html[data-theme="dark"] .sample-status { background: #354326; color: #e0f3c5; }
html[data-theme="dark"] .service-card p { color: var(--muted); }
html[data-theme="dark"] .demo-card[data-category="construction"] .demo-card-top { background: #3d3425; }
html[data-theme="dark"] .demo-card[data-category="trades"] .demo-card-top { background: #253744; }
html[data-theme="dark"] :is(.web-pricing-note, .inventory-scope-card>p) { color: var(--muted); }
html[data-theme="dark"] :is(.web-dot, .location-dot) { background: #b3da4c; }
html[data-theme="dark"] .catalog-jump a:hover { color: #d8fa60; }
html[data-theme="dark"] .web-concept-button { background: #d8fa60; color: #20231f; }
html[data-theme="dark"] .web-browser-concept { box-shadow: 4px 4px 0 #080b07; }

/* Brand sample colors are examples, and stay accurate in either theme. */
html[data-theme="dark"] .brand-kit-colour i { background: #20231f; border-color: #77836b; }
html[data-theme="dark"] .brand-kit-colour i:nth-child(2) { background: #f5f3ea; }
html[data-theme="dark"] .brand-kit-colour i:nth-child(3) { background: #ffc49d; }
html[data-theme="dark"] .brand-kit-mark { border-color: #20231f; }
html[data-theme="dark"] .brand-kit-message { border-color: #77836b; }
html[data-theme="dark"] .growth-step:before { color: #20231f; border-color: #20231f; }

/* Inventory and tool illustrations remain crisp without altering client screenshots. */
html[data-theme="dark"] .inventory-sample-table td>span {
  background: #354326;
  color: #e0f3c5;
  border-color: #71865b;
}
html[data-theme="dark"] :is(.solutions-case, .solutions-tool-card) {
  background: var(--white);
  border-color: var(--line);
}
html[data-theme="dark"] .solutions-schematic li {
  background: #f5f3ea;
  color: #20231f;
}
html[data-theme="dark"] .solutions-tool-symbol { border-color: #20231f; }
html[data-theme="dark"] :is(.solutions-process, .solutions-brief,
  .solutions-brief div, .solutions-note, .solutions-faq details,
  .solutions-faq details:first-of-type) { border-color: #77836b; }
html[data-theme="dark"] .solutions-breadcrumb li+li:before { color: #aeb8a1; }
html[data-theme="dark"] .hosting-hero .service-illustration {
  --paper: #171b16;
  --white: #242a21;
  --ink: #f5f3ea;
  --muted: #bcc4b4;
  --line: #77836b;
  --lavender: #302d3b;
  background: #302d3b;
  color: #f5f3ea;
}
html[data-theme="dark"] .hosting-rack-row:nth-child(2) {
  --white: #fffefa;
  --ink: #20231f;
  --line: #20231f;
  color: #20231f;
}

/* Borders and hard shadows keep the same geometry as the light design. */
html[data-theme="dark"] :is(
  .panel, .tag, .page-hero, .faq details, .home-hero, .home-faq, .proof-strip,
  .app-art, .app-chrome, .app-sidebar, .service-card, .work-section,
  .home-price-card, .home-project-card, .home-project-image, .home-more-section,
  .web-project-window, .web-project-caption, .home-utilities a,
  .web-proof-section, .web-hero, .web-hero-board, .web-browser-concept,
  .web-client-strip, .web-project-card, .web-project-image, .web-project-art,
  .web-demo-band, .web-pricing-section, .web-price-card, .web-package-summary,
  .web-custom-quote, .web-discovery-panel, .web-process li,
  .portfolio-hero, .portfolio-tally, .portfolio-tally a, .client-card,
  .client-screen, .client-chrome, .demo-section, .demo-controls, .demo-controls select,
  .demo-card, .demo-card-top, .portfolio-development, .commerce-hero,
  .commerce-art, .commerce-art-body, .commerce-flow span, .commerce-type,
  .commerce-feature, .commerce-work, .commerce-featured-project,
  .brand-hero, .brand-kit, .brand-kit-grid>div, .brand-price-card, .brand-cancel,
  .brand-steps li, .brand-website-band,
  .growth-hero, .growth-board, .growth-board-head, .growth-node, .growth-benefit,
  .growth-pricing, .growth-single-plan, .growth-plan, .growth-plan-volume,
  .growth-step, .growth-related-card, .growth-fit-list span,
  .service-hero, .service-notes, .editorial-card, .directory-search input,
  .game-card, .game-card img, .directory-section,
  .catalog-hero, .catalog-jump a, .catalog-card,
  .inventory-hero, .inventory-concept, .inventory-concept-screen,
  .inventory-concept-tabs, .inventory-concept-search, .inventory-project-strip,
  .inventory-feature, .inventory-scope-card, .inventory-web-work,
  .hosting-rack-row, .hosting-routes, .hosting-route, .hosting-infra-card,
  .hosting-disclosure, .hosting-games, .hosting-directory a, .hosting-community,
  .nc-card, .nc-note, .nc-project-note, .nl-language
) { border-color: var(--line); }
html[data-theme="dark"] :is(.home-price-card li, .home-all-services,
  .web-page-nav, .web-checks li, .web-faq-section,
  .commerce-scope li, .brand-inclusions li, .brand-faq, .growth-inclusions li,
  .catalog-section, .catalog-extras, .check-list li, .sample-row,
  .inventory-sample-table :is(td, th), .inventory-scope-card li,
  .inventory-faq, .inventory-project-strip dl>div) { border-color: #657057; }
html[data-theme="dark"] :is(.home-price-card:nth-child(2) li,
  .brand-price-social .brand-inclusions li, .growth-plan-featured .growth-inclusions li,
  .growth-single-summary .growth-inclusions li) { border-color: #8c9c5b; }

html[data-theme="dark"] :is(.web-project-window, .web-hero-board, .portfolio-tally,
  .commerce-art, .commerce-featured-project, .service-illustration, .work-board,
  .shop-preview-visual, .growth-single-plan) { box-shadow: 7px 7px 0 #080b07; }
html[data-theme="dark"] :is(.home-price-card, .home-project-card, .service-card,
  .client-card.featured, .free-banner, .inventory-scope-card, .solutions-tool-card) {
  box-shadow: 5px 5px 0 #080b07;
}
html[data-theme="dark"] :is(.web-price-featured, .commerce-price-card,
  .brand-price-social, .inventory-concept, .nc-card, .solutions-case) {
  box-shadow: 6px 6px 0 #080b07;
}
html[data-theme="dark"] :is(.catalog-card, .growth-plan, .hosting-rack-row,
  .studio-sticker) { box-shadow: 4px 4px 0 #080b07; }
html[data-theme="dark"] .growth-board { box-shadow: 8px 8px 0 #080b07; }
html[data-theme="dark"] .brand-kit { box-shadow: 7px 7px 0 #080b07; }
html[data-theme="dark"] .app-art { box-shadow: 9px 9px 0 #080b07; }
html[data-theme="dark"] .game-card:hover { box-shadow: 4px 4px 0 #080b07; }

/* The shop has its own local tokens; keep product photography unfiltered. */
html[data-theme="dark"] :is(.ns-store, .ns-cart) {
  --ns-bg: #171b16;
  --ns-card: #242a21;
  --ns-ink: #f5f3ea;
  --ns-muted: #bcc4b4;
  --ns-line: #77836b;
  --ns-lime: #d8fa60;
}
html[data-theme="dark"] :is(.ns-store, .ns-cart) :focus-visible,
html[data-theme="dark"] .ns-floating-cart:focus-visible { outline-color: var(--theme-focus); }
html[data-theme="dark"] .ns-media { background: #20251d; }
html[data-theme="dark"] :is(.ns-image-label, .ns-media-tag) {
  background: #242a21;
  color: #e2e7d9;
  border-color: #77836b;
}
html[data-theme="dark"] .ns-benefits svg { color: #20231f; border-color: #20231f; }
html[data-theme="dark"] .ns-filter.is-active {
  background: #d8fa60;
  color: #20231f;
  border-color: #20231f;
}
html[data-theme="dark"] :is(.ns-hero-visual, .ns-cart) { box-shadow: 7px 7px 0 #080b07; }
html[data-theme="dark"] :is(.ns-card, .ns-buy-box) { box-shadow: 5px 5px 0 #080b07; }
html[data-theme="dark"] .ns-product-image .ns-media { box-shadow: 6px 6px 0 #080b07; }
html[data-theme="dark"] :is(.ns-button, .ns-cart .button) { box-shadow: 4px 4px 0 #080b07; }
html[data-theme="dark"] :is(.ns-button, .ns-cart .button):hover { box-shadow: 2px 2px 0 #080b07; }
html[data-theme="dark"] .ns-card-actions .ns-button { box-shadow: 3px 3px 0 #080b07; }
html[data-theme="dark"] .ns-specs dl>div { border-color: #657057; }
html[data-theme="dark"] .ns-cart::backdrop { background: #050704bd; }
html[data-theme="dark"] .ns-status { background: #242a21; color: #f5f3ea; border-color: #77836b; }
html[data-theme="dark"] .ns-help .ns-button-primary { background: #fffefa; }
html[data-theme="dark"] .nc-error { color: #ffb4ab; }

/* Retained utility-based specialist pages use the same charcoal, lime and cream. */
html[data-theme="dark"] .legacy-site main :is([class*="text-brand"],
  [class*="text-blue"], [class*="text-indigo"], [class*="text-emerald"],
  [class*="text-purple"], [class*="text-green"]) { color: #c6e68d !important; }
html[data-theme="dark"] .legacy-site main [class*="text-red"] { color: #ffb4ab !important; }
html[data-theme="dark"] .legacy-site main :is([class*="border-slate"],
  [class*="border-gray"]) { border-color: #657057 !important; }
html[data-theme="dark"] .legacy-site main :is([class*="bg-brand"],
  [class*="bg-blue"], [class*="bg-indigo"], [class*="bg-emerald"]) {
  --ink: #20231f;
  color: #20231f !important;
}
html[data-theme="dark"] .legacy-site main :is([class*="bg-brand"],
  [class*="bg-blue"], [class*="bg-indigo"], [class*="bg-emerald"])
  :is([class*="text-"], p, label) { color: #20231f !important; }
html[data-theme="dark"] .legacy-site main :is([class*="bg-green"], [class*="bg-purple"],
  [class*="bg-orange"], [class*="bg-yellow"], [class*="bg-red"]) {
  background-color: #303a24 !important;
}
html[data-theme="dark"] .legacy-site main :is([class*="text-orange"],
  [class*="text-yellow"]) { color: #f5d39a !important; }
html[data-theme="dark"] .legacy-site main :is(input, textarea, select) {
  background: #242a21 !important;
  color: #f5f3ea !important;
  border-color: #77836b !important;
}
html[data-theme="dark"] .legacy-site main :is(input, textarea)::placeholder { color: #adb6a3 !important; }
html[data-theme="dark"] .legacy-site main input::file-selector-button {
  background: #354326;
  color: #f5f3ea;
  border: 1px solid #77836b;
}
html[data-theme="dark"] .legacy-site main :is(a[class*="bg-"], button[class*="bg-"]) {
  border-color: #77836b;
  box-shadow: 3px 3px 0 #080b07;
}
html[data-theme="dark"] .legacy-site main :is([class*="shadow-xl"], [class*="shadow-2xl"]) {
  box-shadow: 5px 5px 0 #080b07 !important;
}
html[data-theme="dark"] .legacy-site .site-header .button-dark { color: #20231f; }
html[data-theme="dark"] .legacy-site .site-footer .brand-name { color: #f5f3ea; }
html[data-theme="dark"] .legacy-site main .gradient-border { background: #242a21; }
html[data-theme="dark"] .legacy-site main .gradient-border:before {
  background: linear-gradient(135deg, #77836b, #464336);
}
html[data-theme="dark"] .legacy-site main .glass-card {
  background: #242a21;
  border-color: #77836b;
}

@media (max-width: 860px) {
  html[data-theme="dark"] .nav-dropdown { box-shadow: none; }
  html[data-theme="dark"] .nav-dropdown a:nth-last-child(2) { border-color: #414b38; }
}
@media (max-width: 650px) {
  html[data-theme="dark"] .ns-catalog-note { background: #242a21; }
}
@media (max-width: 600px) {
  html[data-theme="dark"] .web-hero-board { box-shadow: 5px 5px 0 #080b07; }
  html[data-theme="dark"] .inventory-concept { box-shadow: 4px 4px 0 #080b07; }
  html[data-theme="dark"] .growth-board { box-shadow: 5px 5px 0 #080b07; }
  html[data-theme="dark"] .brand-kit { box-shadow: 4px 4px 0 #080b07; }
}