/*Quick and dirty font import -- TODO: replace with local font for our requirements*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 5%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 5%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 5%;
    --primary: 0 74% 37%;
    --primary-foreground: 0 86% 97%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 32%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84% 37%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 74% 56%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 5%;
    --foreground: 0 0% 98%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 74% 37%;
    --primary-foreground: 0 86% 97%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 64%;
    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 74% 56%;
  }

  :focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }

  /* Ensure all interactive elements have proper focus states */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary ring-0;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Typography */
h1 {
  @apply scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-5xl;
}

h2 {
  @apply scroll-m-20 pb-2 text-[40px] font-semibold tracking-tight transition-colors first:mt-0;
}

h3 {
  @apply scroll-m-20 text-3xl font-semibold tracking-tight;
}

h4 {
  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
}

h5 {
  @apply scroll-m-20 text-xl font-semibold tracking-tight;
}

p {
  @apply leading-7;
}

blockquote {
  @apply mt-6 border-l-2 pl-6 italic;
}

code {
  @apply relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
}

@layer base {
  html {
    font-family: "Poppins", system-ui, sans-serif;
  }
}
