/*
 * Dark theme: a three-step bronze surface rhythm.
 * The sequence repeats across major sections: deep -> medium -> light.
 * Photo-backed hero and CTA sections are intentionally left untouched.
 */
html:not([data-theme="light"]) {
  --dark-tone-1: #080909;
  --dark-tone-2: #0a0b0b;
  --dark-tone-3: #0d0e0e;
  --dark-page-surface: var(--dark-tone-1);
  --site-decor:
    linear-gradient(90deg, rgba(190, 147, 101, 0.034) 1px, transparent 1px),
    linear-gradient(180deg, rgba(229, 222, 210, 0.018) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(185, 138, 89, 0.022) 48.1% 48.28%, transparent 48.42% 100%);
  --site-decor-size: 104px 104px, 104px 104px, 208px 208px;
}

html:not([data-theme="light"]) body {
  background-color: var(--dark-tone-1) !important;
  background-image: var(--site-decor) !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: var(--site-decor-size) !important;
}

/* Match the homepage hero brand to the bronze brand tone used in the header. */
html:not([data-theme="light"]) .hero h1 .hero-brand {
  color: var(--primary-strong) !important;
}

/* Home page rhythm: 1 -> 2 -> 3 -> repeat. */
html:not([data-theme="light"]) .trust-bar,
html:not([data-theme="light"]) #services,
html:not([data-theme="light"]) .work-pricing-section,
html:not([data-theme="light"]) .workflow-block,
html:not([data-theme="light"]) #faq,
html:not([data-theme="light"]) .service-archive-page,
html:not([data-theme="light"]) .service-detail-page,
html:not([data-theme="light"]) .legal-page,
html:not([data-theme="light"]) .subscription-plans-section,
html:not([data-theme="light"]) .subscription-faq-section {
  background-color: var(--dark-tone-1) !important;
  background-image: var(--site-decor) !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: var(--site-decor-size) !important;
}

html:not([data-theme="light"]) .doubts-section,
html:not([data-theme="light"]) #popular,
html:not([data-theme="light"]) .articles-home-section,
html:not([data-theme="light"]) .pricing-page,
html:not([data-theme="light"]) .contacts-page,
html:not([data-theme="light"]) .subscription-benefits,
html:not([data-theme="light"]) .subscription-final-cta,
html:not([data-theme="light"]) .pricing-toc,
html:not([data-theme="light"]) .site-footer {
  background-color: var(--dark-tone-2) !important;
  background-image: var(--site-decor) !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: var(--site-decor-size) !important;
}

html:not([data-theme="light"]) #about,
html:not([data-theme="light"]) .reasons-block,
html:not([data-theme="light"]) .pricing-block,
html:not([data-theme="light"]) .article-archive-page,
html:not([data-theme="light"]) .article-detail-page,
html:not([data-theme="light"]) .subscription-hero,
html:not([data-theme="light"]) .subscription-comparison-section {
  background-color: var(--dark-tone-3) !important;
  background-image: var(--site-decor) !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: var(--site-decor-size) !important;
}

/* Keep the alternating surface visible where a parent section wraps blocks. */
html:not([data-theme="light"]) .work-pricing-section {
  background-color: var(--dark-tone-1) !important;
}

html:not([data-theme="light"]) .work-pricing-section > .reasons-block {
  background-color: var(--dark-tone-3) !important;
}

html:not([data-theme="light"]) .work-pricing-section > .workflow-block {
  background-color: var(--dark-tone-1) !important;
}

html:not([data-theme="light"]) .work-pricing-section > .articles-home-section {
  background-color: var(--dark-tone-2) !important;
}

html:not([data-theme="light"]) .work-pricing-section > .pricing-block {
  background-color: var(--dark-tone-3) !important;
}

/* Deep graphite card surface with a restrained sheen. */
html:not([data-theme="light"]) {
  --graphite-card: #111313;
  --graphite-card-hover: #1b1c1c;
  --corner-accent-rgb: 185, 138, 89;
  --corner-muted-rgb: 235, 241, 242;
}

html:not([data-theme="light"]) .area-card,
html:not([data-theme="light"]) .service-package-card,
html:not([data-theme="light"]) .reason-item,
html:not([data-theme="light"]) .price-list div,
html:not([data-theme="light"]) .client-logo-row div,
html:not([data-theme="light"]) .trust-note,
html:not([data-theme="light"]) .list-card,
html:not([data-theme="light"]) .case-card,
html:not([data-theme="light"]) .service-directory-card,
html:not([data-theme="light"]) .service-info-card,
html:not([data-theme="light"]) .service-final-cta,
html:not([data-theme="light"]) .contacts-panel,
html:not([data-theme="light"]) .contacts-row,
html:not([data-theme="light"]) .contacts-social-grid .social-link,
html:not([data-theme="light"]) .subscription-plan,
html:not([data-theme="light"]) .subscription-faq-list details,
html:not([data-theme="light"]) details,
html:not([data-theme="light"]) .wide-link,
html:not([data-theme="light"]) .article-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 44%),
    linear-gradient(320deg, rgba(255, 255, 255, 0.018), transparent 42%),
    var(--graphite-card) !important;
  box-shadow:
    inset 0 1px 0 rgba(235, 241, 242, 0.045),
    0 18px 42px rgba(0, 0, 0, 0.2) !important;
}

html:not([data-theme="light"]) .area-card:hover,
html:not([data-theme="light"]) .service-package-card:hover,
html:not([data-theme="light"]) .reason-item:hover,
html:not([data-theme="light"]) .list-card:hover,
html:not([data-theme="light"]) .case-card:hover,
html:not([data-theme="light"]) .service-directory-card:hover,
html:not([data-theme="light"]) .service-info-card:hover,
html:not([data-theme="light"]) .contacts-row:hover,
html:not([data-theme="light"]) .contacts-social-grid .social-link:hover,
html:not([data-theme="light"]) .article-card:hover,
html:not([data-theme="light"]) .article-card:focus-visible {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), transparent 48%),
    var(--graphite-card-hover) !important;
}

/* Keep the comparison table in the same neutral graphite family as the cards. */
html:not([data-theme="light"]) .subscription-table-wrap,
html:not([data-theme="light"]) .subscription-table,
html:not([data-theme="light"]) .subscription-table thead,
html:not([data-theme="light"]) .subscription-table tbody,
html:not([data-theme="light"]) .subscription-table tr,
html:not([data-theme="light"]) .subscription-table th,
html:not([data-theme="light"]) .subscription-table td {
  border-color: rgba(235, 241, 242, 0.12) !important;
  background: var(--graphite-card) !important;
  background-image: none !important;
}

html:not([data-theme="light"]) .subscription-table th,
html:not([data-theme="light"]) .subscription-table td {
  border-right-color: rgba(235, 241, 242, 0.1) !important;
  border-bottom-color: rgba(235, 241, 242, 0.1) !important;
}

/* Popular services: keep the cards crisp and solid instead of using the layered gradient. */
html:not([data-theme="light"]) #popular .service-package-card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 64%, rgba(var(--gold-rgb), 0.12) 64.2% 64.8%, transparent 65% 100%),
    var(--graphite-card) !important;
  background-size: 72px 72px, 72px 72px, 180px 180px, auto !important;
}

html:not([data-theme="light"]) #popular .service-package-card::before {
  display: none !important;
}

html:not([data-theme="light"]) #popular .service-package-card:hover {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 64%, rgba(var(--gold-rgb), 0.16) 64.2% 64.8%, transparent 65% 100%),
    var(--graphite-card-hover) !important;
  background-size: 72px 72px, 72px 72px, 180px 180px, auto !important;
}

/* Subtle clipped-corner accents add structure without competing with the bronze system. */
html:not([data-theme="light"]) .area-card,
html:not([data-theme="light"]) .reason-item,
html:not([data-theme="light"]) .list-card,
html:not([data-theme="light"]) .case-card,
html:not([data-theme="light"]) .service-directory-card,
html:not([data-theme="light"]) .service-info-card,
html:not([data-theme="light"]) .service-final-cta,
html:not([data-theme="light"]) .contacts-panel,
html:not([data-theme="light"]) .contacts-row,
html:not([data-theme="light"]) .subscription-plan,
html:not([data-theme="light"]) .subscription-faq-list details {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html:not([data-theme="light"]) .area-card::before,
html:not([data-theme="light"]) .reason-item::before,
html:not([data-theme="light"]) .list-card::before,
html:not([data-theme="light"]) .case-card::before,
html:not([data-theme="light"]) .service-directory-card::before,
html:not([data-theme="light"]) .service-info-card::before,
html:not([data-theme="light"]) .service-final-cta::before,
html:not([data-theme="light"]) .contacts-panel::before,
html:not([data-theme="light"]) .contacts-row::before,
html:not([data-theme="light"]) .subscription-plan::before,
html:not([data-theme="light"]) .subscription-faq-list details::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(var(--corner-accent-rgb), 0.46) 46% 54%, transparent 56% 100%) top left / 48px 48px no-repeat,
    linear-gradient(135deg, transparent 0 44%, rgba(var(--corner-muted-rgb), 0.16) 46% 54%, transparent 56% 100%) bottom right / 48px 48px no-repeat;
  content: "";
  opacity: 0.86;
  pointer-events: none;
  transition: opacity 240ms ease;
}

html:not([data-theme="light"]) .area-card > *,
html:not([data-theme="light"]) .reason-item > *,
html:not([data-theme="light"]) .list-card > *,
html:not([data-theme="light"]) .case-card > *,
html:not([data-theme="light"]) .service-directory-card > *,
html:not([data-theme="light"]) .service-info-card > *,
html:not([data-theme="light"]) .service-final-cta > *,
html:not([data-theme="light"]) .contacts-panel > *,
html:not([data-theme="light"]) .contacts-row > *,
html:not([data-theme="light"]) .subscription-plan > *,
html:not([data-theme="light"]) .subscription-faq-list details > * {
  position: relative;
  z-index: 1;
}

html:not([data-theme="light"]) .area-card:hover::before,
html:not([data-theme="light"]) .reason-item:hover::before,
html:not([data-theme="light"]) .list-card:hover::before,
html:not([data-theme="light"]) .case-card:hover::before,
html:not([data-theme="light"]) .service-directory-card:hover::before,
html:not([data-theme="light"]) .service-info-card:hover::before,
html:not([data-theme="light"]) .service-final-cta:hover::before,
html:not([data-theme="light"]) .contacts-panel:hover::before,
html:not([data-theme="light"]) .contacts-row:hover::before,
html:not([data-theme="light"]) .subscription-plan:hover::before,
html:not([data-theme="light"]) .subscription-faq-list details:hover::before {
  opacity: 1;
}

/* Contact form: use a proper dark surface and dark controls in the dark theme. */
html:not([data-theme="light"]) .contact-form {
  --contact-form-ink: #f3eee6;
  --contact-form-muted: rgba(243, 238, 230, 0.68);
  --contact-form-soft: rgba(243, 238, 230, 0.56);
  --contact-form-border: rgba(var(--gold-rgb), 0.24);
  --contact-form-field: #0d1012;
  border-color: var(--contact-form-border) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--graphite-card) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  color: var(--contact-form-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 24px 70px rgba(0, 0, 0, 0.3) !important;
}

html:not([data-theme="light"]) .contact-form .form-brief {
  border-color: rgba(var(--gold-rgb), 0.2) !important;
  background: rgba(8, 10, 11, 0.72) !important;
}

html:not([data-theme="light"]) .contact-form .form-brief-summary > span:first-child,
html:not([data-theme="light"]) .contact-form .form-segment-group legend,
html:not([data-theme="light"]) .contact-form .form-field span {
  color: rgba(243, 238, 230, 0.84) !important;
}

html:not([data-theme="light"]) .contact-form .form-segment-options span {
  border-color: rgba(var(--gold-rgb), 0.2) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--contact-form-muted) !important;
}

html:not([data-theme="light"]) .contact-form .form-segment-options input:checked + span {
  background: rgba(var(--gold-rgb), 0.18) !important;
  color: var(--contact-form-ink) !important;
}

html:not([data-theme="light"]) .contact-form .form-field input,
html:not([data-theme="light"]) .contact-form .form-field textarea {
  border-color: rgba(243, 238, 230, 0.18) !important;
  background: var(--contact-form-field) !important;
  color: var(--contact-form-ink) !important;
}

html:not([data-theme="light"]) .contact-form .form-field input::placeholder,
html:not([data-theme="light"]) .contact-form .form-field textarea::placeholder {
  color: rgba(243, 238, 230, 0.48) !important;
}

html:not([data-theme="light"]) .contact-form .form-field input:focus,
html:not([data-theme="light"]) .contact-form .form-field textarea:focus {
  border-color: rgba(var(--primary-rgb), 0.68) !important;
  background: #121619 !important;
}