/* Dark theme - only active when system prefers dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override CSS variables for dark mode */
    --color-primary: #f06292;
    --color-primary-hover: #e91e63;
    --color-border: #f06292;
    --color-text: #ffffff;
    --color-text-muted: #dddddd;
    --color-text-meta: #aaaaaa;
    --color-background: #202124;
    --color-background-code: #3a3a3a;
    --color-background-pre: #272822;
    --color-background-toc: #272822;
    --color-background-draft: #f06292;
    --color-callout: #f06292;
  }

  body {
    color: #ffffff;
    background-color: #202124;
  }

  ::-moz-selection {
    background: #f06292;
    color: #ffffff;
    text-shadow: none;
  }

  ::selection {
    background: #f06292;
    color: #ffffff;
    text-shadow: none;
  }

  hr {
    border-block-start: 3px dotted #f06292;
  }

  code {
    background-color: #3a3a3a;
    color: #ffffff;
  }

  pre {
    background-color: #272822;
    border-color: #f06292;
  }

  blockquote {
    border-color: #f06292;
    color: #dddddd;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: #dddddd;
  }

  h1::before { color: #f06292; }
  h2::before { color: #f06292; }
  h3::before { color: #f06292; }
  h4::before { color: #f06292; }
  h5::before { color: #f06292; }
  h6::before { color: #f06292; }

  .toc {
    background-color: #272822;
    color: #ffffff;
    border-color: #f06292;
  }

  /* Links */
  a {
    border-block-end: 3px solid #f06292;
    color: inherit;
  }

  a:hover,
  a:focus {
    background-color: #f06292;
    color: #ffffff;
    outline-color: #f06292;
  }

  .site-description a {
    color: #dddddd;
  }

  .site-description a:hover,
  .site-description a:focus {
    color: #ffffff;
  }

  /* Tags */
  .tags a {
    border-block-end: 3px solid #f06292;
  }

  .tags a:hover,
  .tags a:focus {
    background-color: #f06292;
    color: #ffffff;
  }

  .site-title a {
    color: #ffffff;
    text-decoration: none !important;
  }

  /* Ensure header and nav text is visible in dark mode */
  header,
  header a,
  nav,
  nav a,
  header .main,
  header .main a {
    color: #ffffff;
  }

  .header nav,
  footer {
    border-color: #f06292;
  }

  .highlight {
    background-color: #272822;
  }

  .soc:hover,
  .soc:focus {
    color: #f06292;
    outline-color: #f06292;
  }

  .draft-label {
    color: #ffffff;
    background-color: #f06292;
  }

  /* Tables in dark mode */
  table th {
    background-color: #272822;
    color: #ffffff;
    border-color: #f06292;
  }

  table td {
    border-color: #f06292;
    color: #ffffff;
  }

  table tr:nth-child(even) {
    background-color: #3a3a3a;
  }

  /* Navigation toggle in dark mode */
  .nav-toggle {
    color: #ffffff;
  }

  .nav-toggle:hover,
  .nav-toggle:focus {
    background-color: #f06292;
    color: #ffffff;
    outline-color: #f06292;
  }

  /* Callouts in dark mode */
  .callout {
    background-color: #272822;
    color: #ffffff;
  }

  .callout-alert {
    color: #f8d7da;
    background-color: #2d1b1d;
    border-color: #842029;
  }

  .callout-tip {
    color: #d1ecf1;
    background-color: #0c2428;
    border-color: #0f5132;
  }

  .callout-warning {
    color: #fff3cd;
    background-color: #332701;
    border-color: #997404;
  }

  .callout-custom {
    color: #ffffff;
  }

  /* List bullets */
  ul > li::before {
    color: #f06292;
  }

  /* Images */
  img {
    border-color: #272822;
  }

  /* Figure captions */
  figure h4::before {
    color: #f06292;
  }

  /* Meta text */
  .meta {
    color: #aaaaaa;
  }

  time {
    color: #dddddd;
  }
}