:root {
      --text-color: #333;
      --bg-color: #fafafa;
      --border-color: #e0e0e0;
      --link-color: #0066cc;
      --link-visited: #663399;
      --code-bg: #f5f5f5;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --text-color: #e8e8e8;
        --bg-color: #1a1a1a;
        --border-color: #444;
        --link-color: #66b3ff;
        --link-visited: #cc99ff;
        --code-bg: #2d2d2d;
      }
    }

    body {
      color: var(--text-color);
      background-color: var(--bg-color);
      transition: color 0.3s ease, background-color 0.3s ease;
    }

    a {
      color: var(--link-color);
    }

    a:visited {
      color: var(--link-visited);
    }

    pre,
    code {
      background-color: var(--code-bg);
      border-color: var(--border-color);
    }

    pre {
      border: 1px solid var(--border-color);
    }

    hr {
      border-color: var(--border-color);
    }

    blockquote {
      border-left-color: var(--border-color);
    }

    table {
      border-color: var(--border-color);
    }

    th,
    td {
      border-color: var(--border-color);
    }