/*
  Copyright (C) 2024-2026 memdmp

  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by Affero, Inc., at version 1.

  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the Affero General Public License for more details.

  You should have received a copy of the Affero General Public License along with this program.  If not, see <https://spdx.org/licenses/AGPL-1.0-only>.
*/
@import 'tailwindcss';

@theme {
  --font-sans: 
    InterVariable, Inter, "Noto Sans",
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-space-grotesk: "Space Grotesk", var(--font-sans), sans-serif;
  --font-bios:
    'Ac437 IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
  --font-grub:
    'Px437 DOS/V re. JPN12', 'Ac437 IBM EGA 8x14', 'Hack', 'Courier New',
    'Courier', 'monospace';
  --font-mono:
    'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
  --font-genericmono:
    'Jetbrains Mono Variable', 'Jetbrains Mono', 'JetBrains Mono', 'JetBrainsMono NF', monospace;
  --color-formatted-table-border: var(--color-neutral-800);
  --color-formatted-table-background: var(--color-neutral-950);
  --color-codeblock-border: var(--color-neutral-900);
  --color-codeblock-background: var(--color-neutral-950);
  --color-accent-primary: var(--color-red-400);
}

@utility afterunderline-* {
  @apply relative;
  &::before {
    content: '';
    background: --value(--color-*);
    @apply absolute top-full left-0 -mt-0.5 h-[0.2rem] w-full transition-all -z-10;
  }
}
@utility afterunderline-hoverstate {
  &::before {
    @apply top-0 left-0 mt-0 h-full w-full;
  }
}

@utility formatted-table {
  @apply relative overflow-x-auto shadow-xs rounded-xl border bg-formatted-table-background border-formatted-table-border;
  table {
    @apply w-full text-sm text-left rtl:text-right bg-formatted-table-background;
    thead {
      @apply text-sm border-b rounded-xl border-formatted-table-border;
    }
    tbody tr {
      @apply not-last:border-b border-formatted-table-border;
    }
    th,td {
      @apply px-6 py-3;
    }
    td > b:first-child:last-child {
      @apply px-6 py-4 font-medium whitespace-nowrap;
    }
  }
}
@utility quicklink {
  @apply text-accent-primary transition-all afterunderline-accent-primary hover:afterunderline-hoverstate active:afterunderline-hoverstate focus:afterunderline-hoverstate hover:text-white active:text-white focus:text-white outline-0;
}

@utility internal-header-active {
  &:not(:is(p)) {
    @apply text-white/95;
  }
  &::after {
    @apply -ml-3 bg-gray-200/50;
  }
}

@utility blockquote-* {
  @apply pl-4 p-2 relative my-1;
    &::before {
      @apply absolute w-1 transition-opacity left-0 top-[10%] h-[80%] opacity-50;
      content: '';
      background-color: --value(--color-*);
    }
    &:hover::before {
      @apply opacity-100;
    }
    p {
      &::after {
        @apply hidden;
      }
    }
}
@utility md-card-* {
  @apply p-4 rounded-lg bg-neutral-950 border-[1.8px] my-4 sticky top-4 z-50;
  border-color: --value(--color-*);
}

#postmd {
  @apply font-sans;
  a {
    @apply quicklink text-nowrap;
  }
  h1 {
    @apply text-4xl mb-1.5 mt-2;
  }
  h2 {
    @apply my-1.5 text-2xl;
  }
  h3 {
    @apply my-1 text-xl;
  }
  h4 {
    @apply my-1 text-lg;
  }
  h1,h2,h3,h4,h5,h6,p,blockquote:not(.no-at-a-glance) {
    @apply relative text-white/90 hover:text-white;
    &::after {
      content: "";
      @apply absolute top-[20%] left-0 h-[60%] w-0.5 -ml-4 rounded-full transition-all;
    }
    &:is(p)::after,
    &:is(blockquote)::after {
      @apply bg-gray-200/5;
    }
    &:not(:is(p)):not(:is(blockquote))::after {
      @apply bg-gray-200/15;
    }
    &:hover::after {
      @apply -ml-3 bg-gray-200/75;
    }
    &:hover ~ p::after,
    &:hover ~ blockquote::after {
      @apply bg-gray-200/4;
    }
  }
  h1 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h1:hover)) {
      @apply internal-header-active;
    }
  }
  h2 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h1:hover,~h2:hover)) {
      @apply internal-header-active;
    }
  }
  h3 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h1:hover,~h2:hover,~h3:hover)) {
      @apply internal-header-active;
    }
  }
  h4 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h1:hover,~h2:hover,~h3:hover,~h4:hover)) {
      @apply internal-header-active;
    }
  }
  h5,h6,p,blockquote:not(.no-at-a-glance) {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h5~*:hover,~h1:hover,~h2:hover,~h3:hover,~h4:hover,~h5:hover)) {
      @apply internal-header-active;
    }
  }
  p::after,
  blockquote:not(.no-at-a-glance)::after {
    @apply h-[90%] top-[5%];
  }
  p {
    @apply my-1.5 leading-5;
  }
  code {
    @apply font-genericmono;
  }
  p code {
    @apply bg-codeblock-background -my-1 p-1 rounded-lg;
  }
  pre {
    @apply p-3 -mx-2 overflow-scroll bg-codeblock-background border border-codeblock-border rounded-lg transition-colors max-h-[min(75vh,38rem)];
    code {
      .token {
        @apply text-red-500;
      }
      &,
      .token.builtin,
      .token.interpolation {
        @apply text-[#9CDCFE] selection:bg-[#9CDCFE] selection:text-black;
      }
      .token.operator {
        @apply text-[#d4d4d4] selection:bg-[#d4d4d4] selection:text-black;
      }
      .token.class-name {
        @apply text-[#4ec9b0] selection:bg-[#4ec9b0] selection:text-black;
      }
      .token.number {
        @apply text-[#b5cea8] selection:bg-[#b5cea8] selection:text-black;
      }
      .token.comment {
        @apply text-[#6a9955] selection:bg-[#6a9955] selection:text-black;
      }
      .token.keyword {
        @apply text-[#c586c0] selection:bg-[#c586c0] selection:text-black;
      }
      .token.punctuation {
        @apply text-[white] selection:bg-[white] selection:text-black;
      }
      .token.function {
        @apply text-[#dcdcaa] selection:bg-[#dcdcaa] selection:text-black;
      }
      .token.string {
        @apply text-[#ce9178] selection:bg-[#ce9178] selection:text-black;
      }
      .token.boolean,
      .token.interpolation-punctuation {
        @apply text-[#5293c9] selection:bg-[#5293c9] selection:text-black;
      }
    }
  }
  blockquote:not(.default-blockquote) {
    @apply blockquote-violet-500;
  }
}

/*
  A Blog Sepia, very TODO
*/
[data-blog-theme=sepia] {
  @apply bg-[#2b261e];
}
[data-blog-theme=light] {
  @apply invert hue-rotate-180;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}