/* Dark palette for ordinary site pages. Fullscreen test-pattern tools do not
   load this stylesheet: their pixels and canvas colours must remain exact. */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-text: #eef2f7;
  --color-text-light: #b4c0ce;
  --color-bg: #111820;
  --color-bg-alt: #1c2632;
  --color-border: #405060;
  --color-secondary: #b4c0ce;
  --color-secondary-dark: #d4dce5;
  --theme-accent-text: #ff8495;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .3);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }

/* The existing red is retained on filled buttons for white-text contrast;
   light red is used for links and labels sitting on dark surfaces. */
html[data-theme="dark"] :is(.nav-item.active a, .nav-item a:hover,
  .footer-nav a:hover, .footer-links a:hover, .blog-card-label, .faq-toggle,
  .pricing-table td.price, .tag, .portfolio-card-category,
  .portfolio-category-label, .timeline-year, .achievement-number,
  .posts-tab:hover, .posts-tab.active, .filter-btn:hover,
  .portfolio-card h3 a:hover, .blog-item-content h2 a:hover,
  .news-item-content h2 a:hover, .post-item-content h2 a:hover,
  .skill-category h3, .strengths-list li strong, .service-subsection h3,
  .service-genres h4, .toc-btn, .services-toc .toc-btn,
  .toc-content a:hover, .share-copy:hover, .simulator-arrow,
  .bc-org, .bc-contact-value, .bc-more-link, .bc-vcard-btn:hover,
  .news-content-container a, .blog-content-container a,
  .post-content-container a, .portfolio-content a, .prose a,
  .form-checkbox label a) { color: var(--theme-accent-text); }
/* Navigation and card titles should retain their neutral original styling. */
html[data-theme="dark"] .site-header .main-nav .nav-item a { color: var(--color-text); }
html[data-theme="dark"] .site-header .main-nav .nav-item:is(.active) a,
html[data-theme="dark"] .site-header .main-nav .nav-item a:hover { color: var(--theme-accent-text); }
html[data-theme="dark"] :is(.btn-outline, .btn-outline-primary) { color: var(--theme-accent-text); }
html[data-theme="dark"] .btn-outline-primary { background: rgba(255, 255, 255, .96); color: #a70826; }
html[data-theme="dark"] :is(.btn-outline:hover, .btn-outline-primary:hover) { background: #b00825; color: #fff; }
html[data-theme="dark"] .btn-secondary { background: #48596b; color: #fff; }
html[data-theme="dark"] .filter-btn.active:hover { color: #fff; }

/* Filled red buttons and their selected states must keep white text. */
html[data-theme="dark"] :is(.btn-primary, .contact-button, .category-card.selected,
  .cta-section, .about-cta-section, .page-header, .simulator-header,
  .summary-header, .quote-link-box, .line-link-box) { color: #fff; }
html[data-theme="dark"] a:is(.btn-primary, .btn-secondary, .footer-line-btn, .bc-line-btn, .btn-line, .contact-button, .share-twitter, .share-facebook, .share-line) { color: #fff; }
html[data-theme="dark"] .line-link-box a.btn-line { color: #007a00; }
html[data-theme="dark"] :is(.cta-section, .about-cta-section, .page-header,
  .quote-link-box) .btn-primary,
html[data-theme="dark"] .site-footer a.btn-primary,
html[data-theme="dark"] :is(.cta-section, .about-cta-section, .page-header) .btn-outline:hover,
html[data-theme="dark"] .page-header .toc-btn:hover {
  background: #fff;
  color: #a70826;
}

html[data-theme="dark"] :is(.simulator-cta-btn, .bc-intro, .bc-contact-item,
  .bc-sns-card, .bc-portfolio-card, .bc-news-card, .preview-auth-card) {
  background: var(--color-bg-alt);
}
html[data-theme="dark"] .simulator-cta-section { background: #241d26; }
html[data-theme="dark"] .preview-auth-title,
html[data-theme="dark"] .preview-auth-label { color: var(--color-text); }
html[data-theme="dark"] .preview-auth-subtitle { color: var(--color-text-light); }
html[data-theme="dark"] :is(.preview-auth-note, .preview-auth-toggle-btn) { color: var(--color-text-light); }
html[data-theme="dark"] .preview-auth-error { background: #502329; color: #ffd0d4; border-color: #ad5962; }
html[data-theme="dark"] :is(.preview-auth-input, .preview-auth-input:focus) {
  background: #111820; color: var(--color-text); border-color: var(--color-border);
}
html[data-theme="dark"] .price-disclaimer { background: #423515; border-color: #c49535; }
html[data-theme="dark"] .price-disclaimer p { color: #ffe1a0; }

/* The logo artwork includes dark lettering: keep its original colours on a
   small neutral surface rather than filtering or changing the image. */
html[data-theme="dark"] .site-header .logo {
  background: #fff; border-radius: 5px; padding: 4px 6px;
}
/* The hero intentionally keeps its existing light photographic overlay and
   original logo; keep its type dark against that overlay. */
html[data-theme="dark"] .hero :is(h1, .hero-description) { color: #1e293b; }

html[data-theme="dark"] :is(.form-group input:not([type="checkbox"]):not([type="radio"]),
  .form-group select, .form-group textarea) {
  color: var(--color-text); background-color: #111820; border-color: var(--color-border);
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #b4c0ce; opacity: .8; }

/* Estimate simulator has its own sheet loaded later in the document. */
html[data-theme="dark"] :is(.simulator-container, .category-card:not(.selected),
  .service-details, .delivery-checkbox-option, .summary, .summary-body,
  .floating-summary, .print-button, .pac-container) {
  background: var(--color-bg-alt); color: var(--color-text);
}
html[data-theme="dark"] .delivery-checkbox-option:has(input:checked),
html[data-theme="dark"] :is(.pac-item:hover, .pac-item-selected) { background: #382832; }
html[data-theme="dark"] :is(.service-details-header h3, .service-item-header .price,
  .item-subtotal, .delivery-price, .summary-line.total, .print-button,
  .floating-budget-info span:first-child, .floating-total-amount, .pac-matched) {
  color: var(--theme-accent-text);
}
html[data-theme="dark"] :is(.pac-item, .pac-item-query) { color: var(--color-text); }
html[data-theme="dark"] .checkbox-option { background: #20384d; }
html[data-theme="dark"] .checkbox-option:hover { background: #294961; }
html[data-theme="dark"] .checkbox-option label { color: #cde8ff; }
html[data-theme="dark"] .simulator-container :is(input[type="text"], input[type="number"],
  input[type="datetime-local"], select, textarea) {
  background-color: #111820; color: var(--color-text); border-color: var(--color-border);
}
html[data-theme="dark"] .simulator-container input[readonly] { background: #273441 !important; }
html[data-theme="dark"] .simulator-container small[style*="color: #666"] { color: var(--color-text-light) !important; }
html[data-theme="dark"] .simulator-container :is(.info-box, .summary-footer .info-box) {
  background: #423515; color: #ffe1a0;
}
html[data-theme="dark"] .simulator-container .info-box.success { background: #163e2c; color: #c9f5d8; }
html[data-theme="dark"] .simulator-container .info-box.error { background: #502329; color: #ffd0d4; }
html[data-theme="dark"] .simulator-container .info-box[style*="background"] { background: #20384d !important; color: #d3eaff; }
html[data-theme="dark"] #bundleDiscountNote { background: #423515 !important; color: #ffe1a0 !important; }

/* Printed estimates should remain readable on white paper. */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --color-bg: #fff;
    --color-bg-alt: #fff;
    --color-text: #111;
    --color-text-light: #444;
    --color-border: #aaa;
    --theme-accent-text: #a70826;
  }
  html[data-theme="dark"] :is(body, .simulator-container, .summary, .summary-body) {
    background: #fff; color: #111;
  }
}

/* Keep the logo and navigation on a white header in dark mode. */
html[data-theme="dark"] .site-header { --color-bg: #fff; --color-text: #1e293b; --color-border: #e2e8f0; background: #fff; color: #1e293b; }
html[data-theme="dark"] .site-header .logo { background: transparent; padding: 0; }
html[data-theme="dark"] .site-header .nav-item a { color: #1e293b; }
html[data-theme="dark"] .site-header .main-nav .nav-item:is(.active) a, html[data-theme="dark"] .site-header .main-nav .nav-item a:hover { color: #b00825; }
html[data-theme="dark"] .site-header .theme-selector-trigger { background: #fff; color: #1e293b; border-color: #e2e8f0; }