/* ------------------------------------------------------------
   Dark Mode Stylesheet
   ------------------------------------------------------------ */

/* 1. Root dark theme variables (override light defaults) */
:root[data-theme="dark"] {
  --bg-base:        #1a1a1a;   /* base page background */
  --bg-surface:    #2d2d2d;   /* cards, panels */
  --bg-subtle:     #333333;   /* hover states, dividers */
  --text-primary:  #f5f5f5;   /* main text */
  --text-secondary:#e0e0e0;   /* secondary text */
  --text-muted:    #b0b0b0;   /* meta, labels */
  --accent:        #B8391C;   /* terracotta CTA */
  --accent-hover:  #9C2F16;   /* CTA hover */
  --accent-teal:   #D4622A;   /* secondary accent */
  --accent-light:  #2a1410;   /* light accent background */
  --border:        #444444;   /* borders and separators */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.25);
  --shadow-md:     0 4px 16px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------
   Base layout adjustments for dark mode
   ------------------------------------------------------------ */
body {
  background: var(--bg-base);
  color: var(--text-secondary);
}

/* Header / Topnav */
.topnav {
  background: color-mix(in srgb, var(--bg-base) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.topnav__logo {
  color: var(--text-primary);
}
.topnav__nav .nav-link {
  color: var(--text-secondary);
}
.topnav__nav .nav-link:hover,
.topnav__nav .nav-link.active {
  color: var(--text-primary);
}
.topnav__actions .btn-icon {
  color: var(--text-secondary);
}
.topnav__actions .btn-icon:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Mobile nav overlay */
.mobile-nav {
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
}
.mobile-nav__link {
  color: var(--text-primary);
}
.mobile-nav__link:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------
   Cards, panels and surfaces
   ------------------------------------------------------------ */
.card,
.pricing-card,
.service-item,
.process-step,
.site-footer,
.cookie-consent {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* Highlighted / featured cards */
.pricing-card--featured {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ------------------------------------------------------------
   Buttons – adapt to dark background
   ------------------------------------------------------------ */
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-ghost {
  color: var(--text-secondary);
}
.btn-ghost:hover {
  color: var(--text-primary);
}

/* ------------------------------------------------------------
   Forms – inputs, textarea, select
   ------------------------------------------------------------ */
.form-field input,
.form-field textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-muted);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ------------------------------------------------------------
   Hero section (inner pages) – dark background variant
   ------------------------------------------------------------ */
.page-hero {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  color: var(--text-primary);
}
.page-hero .page-hero__sub {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Proof strip – dark variant
   ------------------------------------------------------------ */
.proof-strip {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.proof-strip__label {
  color: var(--text-muted);
}
.proof-strip__list span {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Differentiator section – dark background
   ------------------------------------------------------------ */
.differentiator {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.differentiator__content h2,
.differentiator__content p {
  color: var(--text-primary);
}
.differentiator__line {
  background: var(--accent-teal);
}

/* ------------------------------------------------------------
   CTA band – dark variant
   ------------------------------------------------------------ */
.cta-band {
  background: var(--bg-surface);
}
.cta-band h2 {
  color: var(--text-primary);
}
.cta-band p {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Footer – dark mode styling
   ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
}
.site-footer__logo {
  color: var(--text-primary);
}
.site-footer__nav a {
  color: var(--text-muted);
}
.site-footer__nav a:hover {
  color: var(--text-primary);
}
.site-footer__copy {
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Cookie banner – dark mode
   ------------------------------------------------------------ */
.cookie-consent {
  background: color-mix(in srgb, var(--bg-surface) 90%, var(--text-primary) 10%);
  border-top: 1px solid var(--border);
}
.cookie-consent__text {
  color: var(--text-secondary);
}
.cookie-consent__link {
  color: var(--accent);
}
.cookie-consent__link:hover {
  color: var(--accent-hover);
}
.cookie-consent__btn {
  background: var(--accent);
  color: #fff;
}
.cookie-consent__btn:hover {
  background: var(--accent-hover);
}

/* ------------------------------------------------------------
   Blog post dark theme adjustments
   ------------------------------------------------------------ */
.blog-post,
.article-body {
  color: var(--text-secondary);
  background: var(--bg-base);
}
.article-body a {
  color: var(--accent);
}
.article-body a:hover {
  color: var(--accent-hover);
}
.article-meta {
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Pricing table – dark mode specifics
   ------------------------------------------------------------ */
.pricing-cards {
  background: var(--bg-base);
}
.pricing-card {
  background: var(--bg-surface);
}
.pricing-card__price {
  color: var(--accent);
}
.pricing-card__desc {
  color: var(--text-secondary);
}
.pricing-card__features li::before {
  color: var(--accent-teal);
}

/* ------------------------------------------------------------
   FAQ section – dark mode
   ------------------------------------------------------------ */
.faq-section {
  border-top: 1px solid var(--border);
}
.faq-section h2 {
  color: var(--text-primary);
}
.faq-toggle {
  color: var(--text-primary);
}
.faq-toggle:hover {
  color: var(--accent);
}
.faq-toggle[aria-expanded="true"] .faq-icon {
  color: var(--accent);
}
.faq-answer {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Accessibility focus outlines (ensure visible on dark bg)
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Misc component tweaks – ensure contrast >= AA
   ------------------------------------------------------------ */
/* Links inside paragraphs */
a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-hover);
}

/* Horizontal rule / divider */
hr {
  border-top: 1px solid var(--border);
}

/* Scrollbar styling for dark theme (optional) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}

/* End of dark mode stylesheet – ~200 lines */