:root {
  --fencing-bg-gradient-start: #1a1f2e;
  --fencing-bg-gradient-end: #1f1a28;
  --fencing-bg-main: rgba(20, 25, 35, 0.75);
  --fencing-bg-sidebar: rgba(20, 25, 35, 0.75);
  --fencing-bg-code: rgba(0, 0, 0, 0.3);
  --fencing-bg-image: url("/static/img/ohsanguklunge.jpg");
  --fencing-bg-image-opacity: 0.6;
  --fencing-bg-image-opacity-card: 0.08;
  
  --fencing-text-primary: #ecf0f1;
  --fencing-text-link: #5dade2;
  --fencing-text-link-hover: #85c1e9;
  --fencing-text-code: #3498db;
  --fencing-text-section: #95a5a6;
  
  --fencing-border: rgba(255, 255, 255, 0.2);
  --fencing-shadow: rgba(0, 0, 0, 0.3);
  --fencing-hover-bg: rgba(93, 173, 226, 0.15);
}

body.light-mode {
  --fencing-bg-gradient-start: #8a9bc7;
  --fencing-bg-gradient-end: #a88fbf;
  --fencing-bg-main: rgba(255, 255, 255, 0.75);
  --fencing-bg-sidebar: rgba(255, 255, 255, 0.75);
  --fencing-bg-code: rgba(0, 0, 0, 0.05);
  
  --fencing-text-primary: #2c3e50;
  --fencing-text-link: #2980b9;
  --fencing-text-link-hover: #3498db;
  --fencing-text-code: #2c3e50;
  --fencing-text-section: #7f8c8d;
  
  --fencing-border: rgba(0, 0, 0, 0.1);
  --fencing-shadow: rgba(0, 0, 0, 0.1);
  --fencing-hover-bg: rgba(93, 173, 226, 0.15);
}

body:not(:has(.home)) {
  background: linear-gradient(
    135deg,
    var(--fencing-bg-gradient-start) 0%,
    var(--fencing-bg-gradient-end) 100%
  );
  background-attachment: fixed;
  color: var(--fencing-text-primary);

  &::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fencing-bg-image) center/cover no-repeat;
    opacity: var(--fencing-bg-image-opacity);
    z-index: -1;
    transition: opacity 0.3s ease;
  }

  aside {
    background: var(--fencing-bg-sidebar);
    backdrop-filter: blur(10px);
    box-shadow: 2px 0 4px var(--fencing-shadow);

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

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

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

    ul li a {
      color: var(--fencing-text-link);

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

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

        .article-description {
          color: var(--fencing-text-link);
        }
      }

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

  main {
    background: var(--fencing-bg-main);
    backdrop-filter: blur(10px);
  }

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

    p, li {
      color: var(--fencing-text-primary);
    }

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

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

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

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

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

    .description {
      color: var(--fencing-text-primary);
      border-bottom-color: var(--fencing-border);
    }

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

    ul li a {
      color: var(--fencing-text-link);

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

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

        .article-description {
          color: var(--fencing-text-link);
        }
      }

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

.home .topic-card[data-topic="fencing"] {
  background: var(--fencing-bg-main);
  backdrop-filter: blur(10px);
  border-left-color: var(--fencing-text-link);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      var(--fencing-bg-gradient-start) 0%,
      var(--fencing-bg-gradient-end) 100%
    );
    z-index: -2;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fencing-bg-image) center/cover no-repeat;
    opacity: var(--fencing-bg-image-opacity-card);
    z-index: -1;
  }

  h2,
  > p,
  .section,
  .articles {
    position: relative;
    z-index: 1;
  }

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

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

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

  > p {
    color: var(--fencing-text-primary);
  }

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

  .articles li a {
    color: var(--fencing-text-link);

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

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

      .article-description {
        color: var(--fencing-text-link);
      }
    }

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

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