/* Dark appearance, following the visitor's system setting. Loaded last on every page (header.php).
   Colours come from the variables in main.css and layouts.css; the rules below cover the places
   that use fixed light colours. Screenshots and illustrations keep their own colours. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background-color: #12161c;
    --default-color: #d6dbe1;
    --heading-color: #eef1f5;
    --accent-color: #ef5b54;
    --accent-hover-color: #ff7a73;
    --surface-color: #1b2129;
    --contrast-color: #ffffff;
    --nav-color: #d6dbe1;
    --nav-hover-color: #ff7a73;
    --nav-mobile-background-color: #1b2129;
    --nav-dropdown-background-color: #1b2129;
    --nav-dropdown-color: #d6dbe1;
    --nav-dropdown-hover-color: #ff7a73;
    --card-border: #2c3440;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    --muted-color: #9aa4b1;
    --shot-border: #2c3440;
    --callout-info-bg: #18212c;
    --callout-info-border: #2b3b50;
    --callout-security-bg: #2a1a1a;
    --callout-security-border: #5a2c2a;
    --coming-bg: #3a2a12;
    --coming-color: #ffc36b;
  }

  body {
    background-color: var(--background-color);
    color: var(--default-color);
  }

  .light-background,
  .section-bg {
    --background-color: #161b22;
    --surface-color: #1d242d;
  }

  /* Header pill and mobile menu */
  .header .header-container,
  .header.scrolled .header-container,
  .scrolled .header .header-container {
    background: #1b2129 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  }

  .header .logo img {
    filter: brightness(1.1);
  }

  /* Page titles and heroes: the pale gradients become dark ones */
  .page-title,
  .page-title.light-background,
  .home-hero,
  .support-page .page-title {
    background:
      radial-gradient(circle at 82% 12%, rgba(239, 91, 84, 0.16), transparent 30%),
      linear-gradient(135deg, #141920 0%, #1c1517 100%) !important;
    border-bottom-color: #2c3440 !important;
  }

  .breadcrumbs ol,
  .page-title .breadcrumbs ol {
    background: #1b2129 !important;
    border-color: #2c3440 !important;
  }

  /* Cards, panels and boxes that use fixed white or grey */
  .card-item,
  .stat-item,
  .router-family-card,
  .browser-card,
  .device-card,
  .related-guide,
  .chooser-section article,
  .chooser-card,
  .chooser-step-grid article,
  .setup-device-card,
  .setup-device-search input,
  .setup-device-filters button,
  .beta-platforms article,
  .beta-platform-card,
  .beta-versions table,
  .faq .faq-container .faq-item,
  .pricing .pricing-card,
  .pricing-term-switch,
  .guide-protocol-layout,
  .doc-toc,
  .doc-body,
  .aff-preview,
  .news-card,
  .dashboard-hero-card,
  .dashboard-features article {
    background-color: #1b2129 !important;
    border-color: #2c3440 !important;
    color: var(--default-color);
  }

  .device-compatibility span {
    color: var(--heading-color);
    background: rgba(239, 91, 84, 0.12);
    border-color: rgba(239, 91, 84, 0.35);
  }

  table,
  .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--default-color);
    --bs-table-border-color: #2c3440;
    color: var(--default-color);
  }

  input,
  select,
  textarea,
  .form-control,
  .form-select {
    background-color: #12161c;
    color: var(--default-color);
    border-color: #2c3440;
  }

  .btn-light {
    --bs-btn-bg: #f8f9fa;
  }

  .text-muted {
    color: var(--muted-color) !important;
  }

  /* The red call-to-action band keeps its colour; buttons on it stay readable */
  .content-cta {
    background: #a8302b;
  }

  /* Footer */
  .footer {
    --background-color: #0e1217;
    background-color: #0e1217;
    border-top: 1px solid #222a33;
  }

  .footer .social-links a {
    border-color: #2c3440;
    color: var(--default-color);
  }

  /* Bob's chat button and other images on light plates */
  .content-hero-aside img,
  .hero-image img,
  .about .images img {
    background: #f5f6f8;
    border-radius: 14px;
  }

  .beta-page .page-title,
  .browser-guide-page .page-title {
    background:
      radial-gradient(circle at 82% 12%, rgba(239, 91, 84, 0.16), transparent 30%),
      linear-gradient(135deg, #141920 0%, #1c1517 100%) !important;
  }

  .beta-intro,
  .browser-hub-intro,
  .support-intro .container {
    background: #1b2129 !important;
    border-color: #2c3440 !important;
  }

  .beta-page .beta-feedback-card {
    background: linear-gradient(135deg, #1f2a36, #161d26);
    border: 1px solid #2c3440;
  }

  .affiliates-page .affiliate,
  .beta-page #beta-join,
  .beta-page #beta-access-tabs,
  .beta-page #beta-seo-content {
    background: var(--background-color) !important;
  }

  .affiliate-header,
  .affiliate-content,
  .affiliate-benefit,
  .beta-page .tab-content,
  .beta-page #beta-seo-content .container,
  .aff-calc-results div,
  .aff-dash-bar,
  .aff-dash-link code {
    background: #1b2129 !important;
    border-color: #2c3440 !important;
    color: var(--default-color);
  }

  .affiliate-content li,
  .affiliate-content p,
  .beta-page main p,
  .beta-page main li {
    color: var(--default-color);
  }

  .aff-sample-pill,
  .aff-status.is-pending {
    background: #3a2a12;
    color: #ffc36b;
  }

  .aff-status.is-cleared {
    background: #12321f;
    color: #7ee2a8;
  }

  .browser-hub,
  .browser-guide-page .browser-hub {
    background: var(--background-color) !important;
  }

  .aff-audience > div,
  .aff-calc-results div,
  .affiliate-figures div {
    background: #1b2129 !important;
    border-color: #2c3440 !important;
  }

  .aff-dash-stats > div {
    background: #1b2129 !important;
    border-color: #2c3440 !important;
  }
}