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

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

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

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

@theme {
  --font-sans: "Outfit Variable", "sans-serif";
  --font-serif: "Instrument Serif", "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));
  --accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));

  --button: light-dark(#f3f4f6, #1f1f1f);
  --button-active: light-dark(#e5e7eb, #2f2f2f);
}

@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;
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  margin-inline: auto;
}

@media print {
  body {
    background: none;
    color: black;
  }
  header,
  footer,
  main {
    max-width: unset !important;
  }
  header,
  footer {
    display: none;
  }
}

[x-cloak] {
  display: none !important;
}