@import "tailwindcss" source('../');
@import "@fontsource/ibm-plex-sans/400.css";
@import "@fontsource/ibm-plex-sans/500.css";
@import "@fontsource/ibm-plex-sans/600.css";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/500.css";

@theme {
  --font-sans: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --color-accent-300: #ffb27a;
  --color-accent-400: #ff9348;
  --color-accent-500: #f6821f;
  --color-accent-600: #d96a0b;
  --color-accent-950: #2a1404;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-800, currentcolor);
  }

  html {
    color-scheme: dark;
  }

  html,
  body {
    @apply bg-gray-950 font-sans text-gray-200 antialiased;
  }

  body {
    background-image:
      radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.035) 1px, transparent 0),
      linear-gradient(to bottom, rgb(246 130 31 / 0.04), transparent 320px);
    background-size:
      22px 22px,
      100% 100%;
  }

  ::selection {
    background: rgb(246 130 31 / 0.35);
  }

  .using-mouse * {
    outline: none !important;
  }
}

:root {
  --sh-class: #7eb5ff;
  --sh-identifier: #d4d4d4;
  --sh-sign: #8b949e;
  --sh-string: #88bbb6;
  --sh-keyword: #ffada8;
  --sh-comment: #8b8b8b;
  --sh-jsxliterals: #d2a8ff;
  --sh-entity: #56d4dd;
  --sh-property: #79c0ff;
}

@utility label-caps {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.markdown {
  @apply text-[0.9375rem] leading-7 text-gray-300;
  overflow-wrap: anywhere;
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  @apply mt-6 mb-3 font-semibold text-gray-100;
}
.markdown h1 {
  @apply border-b border-gray-800 pb-2 text-2xl;
}
.markdown h2 {
  @apply border-b border-gray-800 pb-1.5 text-xl;
}
.markdown h3 {
  @apply text-lg;
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown table,
.markdown pre {
  @apply my-3;
}
.markdown ul {
  @apply list-disc pl-6;
}
.markdown ol {
  @apply list-decimal pl-6;
}
.markdown a {
  @apply text-accent-400 underline-offset-2 hover:underline;
}
.markdown a.mention {
  @apply font-medium text-gray-100;
}
.markdown blockquote {
  @apply border-l-2 border-gray-700 pl-4 text-gray-400;
}
.markdown code {
  @apply rounded bg-gray-800/70 px-1.5 py-0.5 font-mono text-[0.85em];
}
.markdown pre {
  @apply overflow-x-auto rounded-md border border-gray-800 bg-gray-900 p-4 text-sm leading-6;
}
.markdown pre code {
  @apply bg-transparent p-0;
}
.markdown table {
  @apply block w-full overflow-x-auto border-collapse text-sm;
}
.markdown th,
.markdown td {
  @apply border border-gray-800 px-3 py-1.5;
}
.markdown th {
  @apply bg-gray-900 text-left font-semibold;
}
.markdown img {
  @apply inline max-w-full;
}
.markdown hr {
  @apply my-6 border-gray-800;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-rise {
  animation: rise 0.35s ease-out both;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.animate-pulse-dot {
  animation: pulse-dot 1.4s ease-in-out infinite;
}