@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #app {
    @apply min-h-full overflow-x-clip;
  }

  body {
    @apply bg-zinc-100 text-zinc-900 antialiased transition-colors duration-300 dark:bg-zinc-950 dark:text-zinc-100;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-display;
  }

  a {
    @apply text-inherit no-underline;
  }

  input,
  select,
  textarea,
  button {
    font-family: inherit;
  }
}

@layer components {
  .skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-3 focus:z-50 focus:rounded-md focus:bg-zinc-900 focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-white focus:outline-none dark:focus:bg-brand-400 dark:focus:text-zinc-950;
  }

  .page-stack {
    @apply space-y-6;
  }

  .page-title {
    @apply font-display text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl dark:text-zinc-100;
  }

  .page-subtitle {
    @apply text-sm leading-relaxed text-zinc-600 dark:text-zinc-400;
  }

  .text-secondary {
    @apply text-zinc-600 dark:text-zinc-400;
  }

  .text-muted {
    @apply text-zinc-500 dark:text-zinc-500;
  }

  .row {
    @apply flex items-center gap-3;
  }

  .link-inline {
    @apply rounded-sm text-brand-700 underline-offset-4 transition hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:text-brand-300 dark:focus-visible:ring-brand-400 dark:focus-visible:ring-offset-zinc-950;
  }
}