:root {
  --code-font: 'Courier New', Courier, monospace;

  --code-bg-body: #1a1a1a;
  --code-bg-main: #1e1e1e;
  --code-bg-sidebar: #1e1e1e;
  --code-bg-code: #2d2d2d;
  
  --code-text-primary: #4ec9b0;
  --code-text-secondary: #d4d4d4;
  --code-text-muted: #9cdcfe;
  --code-text-link: #569cd6;
  --code-text-link-hover: #4ec9b0;
  --code-text-code: #ce9178;
  --code-text-section: #6a6a6a;
  
  --code-border: #3e3e3e;
  --code-shadow: rgba(0, 0, 0, 0.3);
  --code-hover-bg: rgba(78, 201, 176, 0.1);
}

body.light-mode {
  --code-bg-body: #f8f9fa;
  --code-bg-main: white;
  --code-bg-sidebar: white;
  --code-bg-code: #f5f5f5;
  
  --code-text-primary: #2c5f2d;
  --code-text-secondary: #333;
  --code-text-muted: #0066cc;
  --code-text-link: #0066cc;
  --code-text-link-hover: #2c5f2d;
  --code-text-code: #a0522d;
  --code-text-section: #95a5a6;
  
  --code-border: #e0e0e0;
  --code-shadow: rgba(0, 0, 0, 0.05);
  --code-hover-bg: rgba(78, 201, 176, 0.1);
}

body:not(:has(.home)) {
  background: var(--code-bg-body);
  color: var(--code-text-secondary);

  aside {
    background: var(--code-bg-sidebar);
    box-shadow: 2px 0 4px var(--code-shadow);
    font-family: var(--code-font);

    h2 {
      color: var(--code-text-primary);
      border-bottom-color: var(--code-border);

      a:hover {
        color: var(--code-text-link);
      }
    }

    .section-name {
      color: var(--code-text-section);
    }

    ul li a {
      color: var(--code-text-muted);

      &:hover {
        color: var(--code-text-link-hover);
        background: var(--code-hover-bg);

        .article-title {
          color: var(--code-text-link-hover);
        }

        .article-description {
          color: var(--code-text-muted);
        }
      }

      .article-description {
        color: var(--code-text-section);
      }
    }
  }

  main {
    background: var(--code-bg-main);
    font-family: var(--code-font);
  }

  article {
    h1, h2, h3 {
      color: var(--code-text-primary);
      font-family: var(--code-font);
    }

    h1::before {
      content: '> ';
      color: var(--code-text-link);
    }

    h2::before {
      content: '>> ';
      color: var(--code-text-link);
    }

    p, li {
      color: var(--code-text-secondary);
    }

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

    code {
      background: var(--code-bg-code);
      color: var(--code-text-code);
    }

    a {
      color: var(--code-text-link);

      &:hover {
        color: var(--code-text-link-hover);
      }
    }
  }

  .topic-index {
    h1 {
      color: var(--code-text-primary);

      &::before {
        content: '$ ';
        color: var(--code-text-link);
      }
    }

    .description {
      color: var(--code-text-secondary);
      border-bottom-color: var(--code-border);
    }

    .section h2 {
      color: var(--code-text-section);
      font-weight: 400;
      border-bottom-color: var(--code-border);
      cursor: default;
    }

    ul li a {
      color: var(--code-text-muted);

      &:hover {
        color: var(--code-text-link-hover);
        background: var(--code-hover-bg);

        .article-title {
          color: var(--code-text-link-hover);
        }

        .article-description {
          color: var(--code-text-muted);
        }
      }

      .article-description {
        color: var(--code-text-section);
        padding-left: var(--spacing-md);
      }
    }
  }
}

.home .topic-card[data-topic="code"] {
  background: var(--code-bg-main);
  font-family: var(--code-font);

  h2 {
    color: var(--code-text-primary);

    &::before {
      content: '$ ';
      color: var(--code-text-link);
    }

    a {
      color: var(--code-text-primary);

      &:hover {
        color: var(--code-text-link);
      }
    }
  }

  > p {
    color: var(--code-text-secondary);
  }

  .section strong {
    color: var(--code-text-section);
    border-bottom-color: var(--code-border);
  }

  .articles li a {
    color: var(--code-text-muted);

    &:hover {
      color: var(--code-text-link-hover);
      background: var(--code-hover-bg);

      .article-title {
        color: var(--code-text-link-hover);
      }

      .article-description {
        color: var(--code-text-muted);
      }
    }

    .article-title {
      color: var(--code-text-muted);
    }

    .article-description {
      color: var(--code-text-section);
    }
  }
}