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

body {
  @apply antialiased leading-snug;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@layer base {
  :root {
    --navbar-height: 3rem;
  }
}

@layer components {
  .product-h1 {
    @apply font-[500] text-4xl md:text-5xl tracking-tight leading-none md:text-center mb-3;
  }

  .product-h2 {
    @apply font-[700] text-xl tracking-tight md:text-center mb-1.5;
  }
  
  .product-body {
    @apply text-neutral-400 max-w-prose md:text-center md:mx-auto mb-6;
  }

  .button-primary {
    @apply inline-block w-fit hover:bg-neutral-400 transition-colors duration-500 ease-in-out text-neutral-950 font-[500] tracking-tight bg-neutral-50 rounded-full px-3.5 py-1;
  }

  .button-secondary {
    @apply inline-block w-fit hover:text-neutral-400 transition-colors duration-500 ease-in-out tracking-tight border border-neutral-700 rounded-full px-3.5 py-1;
  }

  .navbar-spacer {
    @apply h-[var(--navbar-height)];
  }
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-Light-WebXL-657a8f32.woff2") format('woff2'),
       url("/assets/EuclidCircularA-Light-WebXL-3b2484e4.woff") format('woff'),
       url("/assets/EuclidCircularA-Light-WebXL-cf178e53.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-LightItalic-WebXL-c82312bc.woff2") format('woff2'),
       url("/assets/EuclidCircularA-LightItalic-WebXL-1352c50c.woff") format('woff'),
       url("/assets/EuclidCircularA-LightItalic-WebXL-5bc370d6.ttf") format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-Regular-WebXL-4d93afb2.woff2") format('woff2'),
       url("/assets/EuclidCircularA-Regular-WebXL-46d4687f.woff") format('woff'),
       url("/assets/EuclidCircularA-Regular-WebXL-40bd46d3.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-RegularItalic-WebXL-59999495.woff2") format('woff2'),
       url("/assets/EuclidCircularA-RegularItalic-WebXL-e1bcab1a.woff") format('woff'),
       url("/assets/EuclidCircularA-RegularItalic-WebXL-2991eb98.ttf") format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-Medium-WebXL-e12941f4.woff2") format('woff2'),
       url("/assets/EuclidCircularA-Medium-WebXL-bf323bd2.woff") format('woff'),
       url("/assets/EuclidCircularA-Medium-WebXL-1526fc7d.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-MediumItalic-WebXL-42998d33.woff2") format('woff2'),
       url("/assets/EuclidCircularA-MediumItalic-WebXL-bbb9ffc4.woff") format('woff'),
       url("/assets/EuclidCircularA-MediumItalic-WebXL-015b67a1.ttf") format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-Semibold-WebXL-c3360dc0.woff2") format('woff2'),
       url("/assets/EuclidCircularA-Semibold-WebXL-e4c4628c.woff") format('woff'),
       url("/assets/EuclidCircularA-Semibold-WebXL-03e8171e.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-SemiboldItalic-WebXL-9e1ad5e8.woff2") format('woff2'),
       url("/assets/EuclidCircularA-SemiboldItalic-WebXL-cc39d433.woff") format('woff'),
       url("/assets/EuclidCircularA-SemiboldItalic-WebXL-3a9fabb3.ttf") format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-Bold-WebXL-4222b030.woff2") format('woff2'),
       url("/assets/EuclidCircularA-Bold-WebXL-412eeafa.woff") format('woff'),
       url("/assets/EuclidCircularA-Bold-WebXL-1443756d.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Euclid Circular A';
  src: url("/assets/EuclidCircularA-BoldItalic-WebXL-b5318496.woff2") format('woff2'),
       url("/assets/EuclidCircularA-BoldItalic-WebXL-bca4980f.woff") format('woff'),
       url("/assets/EuclidCircularA-BoldItalic-WebXL-90cf338c.ttf") format('truetype');
  font-weight: 700;
  font-style: italic;
}