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

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

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

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

  --animate-reveal: reveal 0.3s forwards ease-in-out;
  --animate-logo: logo 0.5s forwards ease-out;
  --animate-gradient-x: gradient-x 6s ease infinite;
  --animate-gradient-y: gradient-y 6s ease infinite;
  --animate-gradient-xy: gradient-xy 6s ease infinite;
  @keyframes reveal {
    0% {
      opacity: 0;
      transform: translateY(20px);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
      filter: blur(0px);
    }
  }
  @keyframes logo {
    0% {
      transform: translateY(100%);
      color: var(--primary);
    }
    100% {
      transform: translateY(0%);
      color: var(--secondary);
    }
  }
  @keyframes gradient-x {
    0%,
    100% {
      background-size: 200% 200%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }
  @keyframes gradient-y {
    0%,
    100% {
      background-size: 400% 400%;
      background-position: center top;
    }
    50% {
      background-size: 200% 200%;
      background-position: center center;
    }
  }
  @keyframes gradient-xy {
    0%,
    100% {
      background-size: 400% 400%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }
}

:root {
  --primary: oklch(99% 0 0);
  --secondary: oklch(15% 0 0);
  --tertiary: oklch(40% 0 0);
  --accent: oklch(25% 0 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: oklch(0% 0 0);
    --secondary: oklch(95% 0 0);
    --tertiary: oklch(60% 0 0);
    --accent: oklch(75% 0 0);
  }

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

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