/* SMMG-aligned dark mode for PCAP Feed Decoder.
   The desktop dark theme intentionally keeps the top hero strip dark
   and makes the main project-introduction panel white, matching SMMG.
*/

html[data-theme="dark"] body {
  background: #111317;
  color: #f0f0f0;
}

/* Main hero: dark 78px header strip, then white editorial panel. */
html[data-theme="dark"] .hero {
  color: #262626 !important;
  background: linear-gradient(
    to bottom,
    #111317 0,
    #111317 78px,
    #ffffff 78px,
    #ffffff 100%
  ) !important;
}

html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero .project-type {
  color: #262626 !important;
}

html[data-theme="dark"] .hero .hero-dek {
  color: #737373 !important;
}

html[data-theme="dark"] .hero .hero-mark {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .hero .theme-label,
html[data-theme="dark"] .hero .theme-icon {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .hero .hero-links a {
  color: #262626 !important;
}

html[data-theme="dark"] .hero .hero-links a:hover {
  color: #1754cf !important;
}

html[data-theme="dark"] .hero .hero-separator {
  color: #737373 !important;
}

html[data-theme="dark"] .theme-toggle {
  color: #f0f0f0 !important;
  border-color: #303541 !important;
  background: transparent !important;
}

html[data-theme="dark"] .layout,
html[data-theme="dark"] .content,
html[data-theme="dark"] .sidebar {
  background: #111317;
}

html[data-theme="dark"] .sidebar {
  color: #f0f0f0;
}

html[data-theme="dark"] .side-label {
  color: #999999;
}

html[data-theme="dark"] .side-title {
  color: #f0f0f0;
}

html[data-theme="dark"] .side-copy {
  color: #999999;
}

html[data-theme="dark"] .side-rule {
  background: #303541;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .content p,
html[data-theme="dark"] .content li {
  color: #f0f0f0;
}

html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong {
  color: #f0f0f0;
}

html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .section-note,
html[data-theme="dark"] .table-note {
  color: #999999;
}

html[data-theme="dark"] a {
  color: #306ee8;
}

html[data-theme="dark"] a:hover {
  color: #306ee8;
}

html[data-theme="dark"] code {
  color: #f0f0f0;
  background: #272c35;
  border-color: #303541;
}

html[data-theme="dark"] pre {
  color: #f0f0f0;
  background: #1a1d23;
  border-color: #303541;
}

html[data-theme="dark"] table {
  border-color: #303541;
  background: #1a1d23;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  color: #f0f0f0;
  border-color: #303541;
}

html[data-theme="dark"] th {
  background: #272c35;
}

html[data-theme="dark"] td {
  background: #1a1d23;
}

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .path-grid article,
html[data-theme="dark"] .related-grid > div {
  background: #1a1d23;
  color: #f0f0f0;
  border-color: #303541;
}

html[data-theme="dark"] .metric-value {
  color: #f0f0f0;
}

html[data-theme="dark"] .metric-unit,
html[data-theme="dark"] .metric-detail {
  color: #999999;
}

html[data-theme="dark"] .path-label {
  color: #306ee8;
}

html[data-theme="dark"] blockquote {
  color: #f0f0f0;
  background: #1a1d23;
  border-left-color: #306ee8;
}

html[data-theme="dark"] .architecture {
  background: #1a1d23;
  border-color: #303541;
}

html[data-theme="dark"] .architecture-list > div {
  border-color: #303541;
}

html[data-theme="dark"] .architecture-list strong {
  color: #f0f0f0;
}

html[data-theme="dark"] .architecture-list span {
  color: #999999;
}

html[data-theme="dark"] .pipeline > div {
  background: #1a1d23;
  color: #f0f0f0;
  border-color: #303541;
}

html[data-theme="dark"] .pipeline span {
  color: #306ee8;
}

html[data-theme="dark"] .footer {
  background: #111317;
  color: #f0f0f0;
  border-top-color: #303541;
}

html[data-theme="dark"] .footer span {
  color: #999999;
}

html[data-theme="dark"] .footer strong {
  color: #f0f0f0;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .hero {
    background: linear-gradient(
      to bottom,
      #111317 0,
      #111317 60px,
      #ffffff 60px,
      #ffffff 100%
    ) !important;
  }
}