@import "@fontsource-variable/red-hat-mono";
@import "@fontsource-variable/outfit";

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

@theme inline {
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-tertiary: var(--tertiary);

  --color-button: var(--button);
  --color-button-active: var(--button-active);
}

@theme {
  --font-sans: "Outfit Variable", "sans-serif";
  --font-mono: "Red Hat Mono Variable", "monospace";

  --animate-reveal: reveal 0.3s forwards ease-in-out;

  @keyframes reveal {
    0% {
      opacity: 0;
      transform: translateY(20px);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
      filter: blur(0px);
    }
  }
}

:root {
  color-scheme: light dark;
  --primary: light-dark(var(--color-neutral-50), var(--color-black));
  --secondary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
  --tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));

  --button: light-dark(var(--color-neutral-200), var(--color-neutral-800));
  --button-active: light-dark(
    var(--color-neutral-300),
    var(--color-neutral-700)
  );
}

@media (prefers-color-scheme: dark) {
  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}