@import "tailwindcss";
@plugin "@tailwindcss/typography";

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-700-italic.woff2") format("woff2");
}

@layer utilities {
  .prose {
    --tw-prose-body: var(--color-fg);
    --tw-prose-headings: var(--color-fg);
    --tw-prose-code: var(--color-fg);
    --tw-prose-pre-bg: var(--color-card);
    --tw-prose-bold: var(--color-fg);
    --tw-prose-quotes: var(--color-fg);
    --tw-prose-quote-borders: var(--color-card);
    --tw-prose-bullets: var(--color-fg);
    --tw-prose-hr: var(--color-fg);
    --tw-prose-captions: var(--color-card);
    --tw-prose-th-borders: var(--color-card);
    --tw-prose-td-borders: var(--color-fg);
    --tw-prose-links: var(--color-special);

    font-size: 0.95rem;
    line-height: 1.85;

    :where(code):not(
      :where([class~="not-prose"], [class~="not-prose"] *, pre code)
    ) {
      @apply rounded-sm ring-1 ring-inset ring-card px-1 py-[0.2rem] font-normal;
    }

    :where(code):not(
        :where([class~="not-prose"], [class~="not-prose"] *)
      )::before,
    :where(code):not(
        :where([class~="not-prose"], [class~="not-prose"] *)
      )::after {
      content: none;
    }

    @apply max-w-[min(80vw,100%)] md:max-w-[min(75ch,100%)] lg:max-w-[min(85ch,100%)] mx-auto;
  }

  .smallcaps {
    font-variant: small-caps;
  }

  .hover-special {
    @apply transition-colors hover:text-special;
  }

  .group-hover-special {
    @apply transition-colors group-hover:text-special;
  }

  .panel {
    @apply border border-card bg-card/20;
  }

  .panel-link {
    @apply border border-card bg-card/20 transition-all hover:bg-card/40 hover:border-special;
  }

  .section-label {
    @apply text-special text-sm font-bold lowercase tracking-[0.15em];
  }
}

.expressive-code {
  --ec-codeBg: transparent !important;
  --ec-frm-edBg: transparent !important;
  --ec-frm-trmBg: transparent !important;
  --ec-brdCol: var(--color-card) !important;
  --ec-brdWd: 1px;
  --ec-frm-edActTabBrdCol: var(--color-card) !important;
  --ec-frm-edTabBarBrdCol: var(--color-card) !important;
  --ec-frm-edTabBarBrdBtmCol: var(--color-card) !important;
  --ec-frm-trmTtbBg: transparent !important;
  --ec-frm-trmTtbBrdBtmCol: var(--color-card) !important;
}

@theme {
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --color-fg: #d1d5db;
  --color-fg-lighter: #9ca3af;

  --color-bg: #000;

  --color-card: #161b22;
  --color-special: var(--color-blue);

  --color-blue: #74c7ec;
  --color-green: #a6e3a1;
  --color-yellow: #f9e2af;
  --color-purple: #cba6f7;
  --color-red: #f38ba8;
}

@layer base {
  [data-theme="dark"] {
    --color-fg: #d1d5db;
    --color-fg-lighter: #9ca3af;

    --color-bg: #000;

    --color-card: #161b22;
    --color-special: var(--color-blue);

    --color-blue: #74c7ec;
    --color-green: #a6e3a1;
    --color-yellow: #f9e2af;
    --color-purple: #cba6f7;
    --color-red: #f38ba8;
  }

  [data-theme="light"] {
    --color-fg: #3a3d4a;
    --color-fg-lighter: #555a6b;

    --color-bg: #f8f9fc;

    --color-card: #d0d5df;
    --color-special: var(--color-blue);

    --color-blue: #1a90c4;
    --color-green: #40a02b;
    --color-yellow: #df8e1d;
    --color-purple: #8839ef;
    --color-red: #d20f39;
  }

  html {
    font-size: 106.25%;
    scrollbar-gutter: stable;
  }

  body {
    font-family: var(--font-mono);
    background-color: var(--color-bg);
  }
}
