/* Enable both color schemes so browsers know we support dark */
:root { color-scheme: light dark; }

/* High-contrast dark theme override for Introduction theme */
@media (prefers-color-scheme: dark) {
  /* Base colors */
  html, body {
    background: #111;
    color: #e8e8e8;
  }

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

  /* Body text and muted text */
  p, li, dt, dd {
    color: #e8e8e8 !important;
  }
  small, .muted, blockquote, figcaption {
    color: #b5b5b5 !important;
  }

  /* Links */
  a, a:visited {
    color: #66b3ff !important;        /* bright blue for readability */
    text-decoration-color: #66b3ff !important;
  }
  a:hover, a:focus, a:active {
    color: #99ccff !important;
    text-decoration-color: #99ccff !important;
    text-decoration: underline;
  }

  /* Horizontal rules and borders */
  hr {
    border-color: #2a2a2a;
    background: #2a2a2a;
  }
  * {
    border-color: #2a2a2a;
  }

  /* Section / container backgrounds */
  .container, .section, .post, .project, .content, .home, main {
    background-color: transparent !important;
  }
  .card, .entry, .project-card, .post-card {
    background: #161616 !important;
    border: 1px solid #2a2a2a !important;
  }

  /* Buttons (if you add forms later) */
  button, .btn {
    background: #202020;
    color: #f0f0f0;
    border: 1px solid #2a2a2a;
  }
  button:hover, .btn:hover {
    background: #262626;
  }

  /* Form inputs */
  input, textarea, select {
    background: #171717;
    color: #e8e8e8;
    border: 1px solid #2a2a2a;
  }

  /* Code blocks and inline code */
  pre, code, kbd, samp {
    background: #181818 !important;
    color: #f0f0f0 !important;
    border: 1px solid #2a2a2a !important;
  }

  /* Footer */
  footer {
    background: #111 !important;
    color: #b5b5b5 !important;
  }

  /* Images with transparency look better on dark bg */
  img {
    background-color: #222;
  }
 
  svg.feather.feather-arrow-up { stroke: #e8e8e8 !important; fill: none !important; }
  a[href="#top"], .top-link, .to-top { color: #e8e8e8 !important; }

}