@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";

@theme {
  --hover-glow: 120%;
  --default-padding: 0.8rem;
  --margin-top: 1rem;
  --border-radius: 0.5rem;

  /*   Catpuccin */
  --mocha-base: #1e1e2e;
  --mocha-text: #cdd6f4;
  --mocha-pink: #f5c2e7;
  --mocha-mauve: #cba6f7;
  --mocha-red: #f38ba8;
  --mocha-maroon: #eba0ac;
  --mocha-peach: #fab387;
  --mocha-yellow: #f9e2af;
  --mocha-green: #a6e3a1;
  --mocha-teal: #94e2d5;
  --mocha-sky: #89dceb;
  --mocha-sapphire: #74c7ec;
  --mocha-blue: #89b4fa;
  --mocha-lavender: #b4befe;
  --mocha-text: #cdd6f4;
  --mocha-subtext1: #bac2de;
  --mocha-subtext0: #a6adc8;
  --mocha-overlay2: #9399b2;
  --mocha-overlay1: #7f849c;
  --mocha-overlay0: #6c7086;
  --mocha-surface2: #585b70;
  --mocha-surface1: #45475a;
  --mocha-surface0: #313244;
  --mocha-base: #1e1e2e;
  --mocha-mantle: #181825;
  --mocha-crust: #11111b;
}

@layer components {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    text-align: start;
  }

  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }

  h4 {
    font-size: 1rem;
  }

  h5 {
    font-size: 0.875rem;
  }

  h6 {
    font-size: 0.75rem;
  }

  hr {
    color: var(--mocha-surface0);
    margin: 1rem 0;
    border: 1px solid;
  }

  .jetbrains-mono-regular {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
  }

  .post-content {
    code {
      font-size: 1.125rem;
      line-height: 1.5;
      font-family: maple-mono;
      background-color: var(--mocha-mantle);
    }

    a:not(:has(sup)) {
      text-decoration: underline;
      text-underline-offset: 2px;
      color: var(--mocha-lavender);
    }

    /* Footnotes */
    section[role="doc-endnotes"] {
      hr {
        margin-bottom: var(--default-padding);
      }

      li {
        list-style: numbered inside;

        &::marker {
          color: var(--mocha-surface0);
        }

        p {
          display: inline;
        }
      }

      a[role="doc-backlink"] {
        display: none;
      }
    }

    /* 󰓶  Github-style markdown quotes */
    blockquote {
      &.note {
        border-color: var(--mocha-blue);
      }

      &.tip {
        border-color: var(--mocha-green);
      }

      &.important {
        border-color: var(--mocha-mauve);
      }

      &.warning {
        border-color: var(--mocha-yellow);
      }

      &.caution {
        border-color: var(--mocha-red);
      }

      padding: var(--default-padding);
      background-color: var(--mocha-mantle);
      border-left: solid 0.8rem;
      border-color: var(--mocha-lavender);
      border-radius: var(--border-radius);
    }

    /* CODE HIGHLIGHTS */
    pre:has(code) {
      padding: var(--default-padding);
      background-color: var(--mocha-mantle);
      overflow-x: scroll;
      border-radius: var(--border-radius);
    }

    pre code {
      .hl-comment {
        color: #5f5f87;
        font-style: italic;
      }

      .hl-function {
        color: #89b4fa;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-keyword {
        color: #cba6f7;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-module {
        color: #cdd6f4;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-number {
        color: #fab387;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-operator {
        color: #89dceb;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-string {
        color: #a6e3a1;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }

      .hl-variant {
        color: #f9e2af;

        &:hover {
          filter: brightness(var(--hover-glow));
        }
      }
    }

    /* END OF CODE HIGHLIGHTS */
  }
}