@import "tailwindcss";

@theme {
  --default-font-family: "B612", sans-serif;
  --default-mono-font-family: "B612", sans-serif;

  --color-canvas: #1e2528;
  --color-green: #c5dfaa;
  --color-yellow: #f5d098;
  --color-subtext0: #96b4aa;
  --color-overlay0: #58686d;
  --color-surface0: #262f33;
  --color-surface1: #374145;
  --color-surface2: #4a585c;
  --color-white: #f8f9e8;
  --color-mantle: #191e21;

  @keyframes blink {
    to {
      opacity: 0;
    }
  }

  --animate-blink: blink 1s ease-in infinite;
}

@theme inline {
  --color-primary: var(--color-green);
  --color-secondary: var(--color-subtext0);
  --color-overlay: var(--color-overlay0);

  --color-muted: var(--color-surface2);
  --color-faint: var(--color-surface1);
}

@layer base {
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;

    background-color: var(--color-mantle);
    color: var(--color-white);
  }

  body {
    position: relative;
  }

  ul {
    list-style-type: square;
    list-style-position: inside;
  }

  a {
    color: var(--color-secondary);
    padding: 0.125rem;
    text-decoration: underline;
    text-underline-offset: 4px;

    &[aria-current="page"] {
      font-weight: bold;

      &::after {
        font-weight: normal;
      }
    }

    &:not(:has(img)) {
      &:hover,
      &:focus-visible {
        background-color: var(--color-secondary);
        color: var(--color-canvas);
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
      }
    }
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;

    &::before {
      content: "# ";
    }
  }

  h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;

    &::before {
      content: "## ";
    }
  }

  h3 {
    margin-bottom: 0.5rem;

    &::before {
      content: "### ";
    }
  }

  h1,
  h2,
  h3 {
    &::before {
      text-shadow: none;
      font-weight: normal;
      color: var(--color-muted);
    }

    &:hover::before {
      color: var(--color-secondary);
    }

    color: var(--color-primary);
    font-weight: bold;
  }

  ::selection {
    color: var(--color-canvas);
    background: var(--color-secondary);
  }

  p,
  ul {
    margin-bottom: 1rem;
  }

  [data-tooltip] {
    position: relative;

    &::after {
      content: attr(data-tooltip);
      display: none;
      font-size: 1rem;
      font-weight: normal;

      position: fixed;
      position-area: top;
      position-try-fallbacks: flip-block;

      padding-inline: 0.25rem;
      margin-bottom: 0.25rem;
      white-space: nowrap;

      background-color: var(--color-mantle);
      border: 1px solid var(--color-overlay);
      color: var(--color-white);
    }

    &[data-tooltip-position="bottom"]::after {
      position-area: bottom;
      margin-bottom: 0;
      margin-top: 0.25rem;
    }

    &:hover::after,
    &:focus-visible::after {
      display: block;
    }
  }
}

@layer utilities {
  .shell {
    &::before {
      content: "$";
      color: var(--color-primary);
      font-weight: bold;
      padding-right: 1ch;
    }

    &::after {
      content: "█";
      padding-left: 1ch;
      animation: var(--animate-blink);
    }
  }

  .crt,
  [data-tooltip]::after {
    --drop-shadow-text: 0 0 3px var(--color-subtext0);
    --drop-shadow-svg: 0 0 2px var(--color-subtext0);

    text-shadow: var(--drop-shadow-text);

    svg {
      filter: drop-shadow(var(--drop-shadow-svg));
    }

    .text-overlay,
    .text-muted,
    .text-faint,
    .text-secondary {
      text-shadow: none;
    }

    &::before {
      content: " ";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%),
        linear-gradient(
          90deg,
          rgba(255, 0, 0, 0.06),
          rgba(0, 255, 0, 0.02),
          rgba(0, 0, 255, 0.06)
        );

      background-size:
        100% 2px,
        3px 100%;

      z-index: 99;
      pointer-events: none;
    }
  }
}