@import 'tailwindcss';

@plugin '@tailwindcss/container-queries';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: sans-serif;
  --font-system: system-ui;
  --font-inter: Inter, system-ui, sans-serif;
  --font-display: Inter, system-ui, sans-serif;
  --font-mono: monospace;

  --animate-pop-in: pop-in 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;

  --ease-cubic: cubic-bezier(0.075, 0.82, 0.165, 1);
  --spacing-22: 88px;

  --color-slate-25: rgb(252 253 254);
  --color-zinc-925: 28 28 32;

  /* dark theme */
  --color-primary-100: rgb(248 248 251);
  --color-primary-200: rgb(175 175 185);

  /* light theme */
  --color-primary-800: rgb(50 58 77);
  --color-primary-900: rgb(15 23 42);

  --color-white: var(--color-other-white, rgb(255 255 255));
  --color-black: var(--color-other-black, rgb(0 0 0));

  @keyframes pop-in {
    0% {
      transform: translateY(12px);
      opacity: 0;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
}

@layer utilities {
  .font-display {
    letter-spacing: var(--tracking-tight);
  }
}

@custom-variant hover (&:hover);

@font-face {
  font-family: 'Inter';
  src: url('/font/Inter.woff2') format('woff2');
  font-display: swap;
}

body {
  @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
}

.dark {
  color-scheme: dark;
}

.wait * {
  cursor: wait !important;
}

#nprogress {
  z-index: 999 !important;
  position: fixed !important;
}

#nprogress .bar {
  @apply bg-primary-900! dark:bg-primary-100!;
  z-index: 999 !important;
  height: 1px !important;
}

#nprogress .peg {
  display: none !important;
  z-index: 999 !important;
}

pre:not(.code-baseline) {
  @apply bg-slate-100 p-2 rounded-xl my-2 max-w-full whitespace-pre-wrap
  border-slate-200 border dark:bg-zinc-950 dark:border-zinc-900 text-xs;
}

:not(pre) > code:not(.code-baseline) {
  @apply bg-slate-100 dark:bg-zinc-950;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  border-radius: 6px;
  font-size: 12px;
}

select:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: none;
  @apply ring-2 ring-offset-1 ring-primary-900 dark:ring-primary-100;
}