@font-face {
  font-family: "Inter";
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Marcellus";
  src: url("https://fonts.gstatic.com/s/marcellus/v14/wEO_EBrOk8hQLDvIAF81VvoK.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

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

@layer base {
  :root {
    --brand-navy: 214 42% 17%;
    --brand-gold: 38 34% 57%;
    --brand-cream: 42 38% 96%;
    --brand-ink: 218 33% 18%;
    --brand-slate: 213 17% 39%;

    --background: 42 38% 96%;
    --foreground: 218 33% 18%;

    --muted: 42 30% 92%;
    --muted-foreground: 214 15% 40%;

    --popover: 0 0% 100%;
    --popover-foreground: 218 33% 18%;

    --border: 39 24% 82%;
    --input: 39 24% 82%;

    --card: 0 0% 100%;
    --card-foreground: 218 33% 18%;

    --primary: 214 42% 17%;
    --primary-foreground: 42 38% 96%;

    --secondary: 42 30% 92%;
    --secondary-foreground: 218 33% 18%;

    --accent: 38 34% 57%;
    --accent-foreground: 218 33% 18%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 38 34% 57%;

    --radius: 0.375rem;
  }

  .dark {
    --brand-navy: 214 42% 17%;
    --brand-gold: 38 34% 57%;
    --brand-cream: 42 38% 96%;
    --brand-ink: 218 33% 18%;
    --brand-slate: 213 17% 39%;

    --background: 215 28% 10%;
    --foreground: 40 30% 93%;

    --muted: 214 18% 18%;
    --muted-foreground: 38 18% 68%;

    --accent: 38 34% 57%;
    --accent-foreground: 215 28% 10%;

    --popover: 215 28% 10%;
    --popover-foreground: 40 30% 93%;

    --border: 214 17% 24%;
    --input: 214 17% 24%;

    --card: 214 25% 14%;
    --card-foreground: 40 30% 93%;

    --primary: 38 34% 57%;
    --primary-foreground: 215 28% 10%;

    --secondary: 214 18% 18%;
    --secondary-foreground: 40 30% 93%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 38 34% 57%;

    --radius: 0.375rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  a,
  button,
  input,
  textarea,
  select,
  [role="button"] {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }
}

@layer utilities {
  @keyframes services-marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  .animate-services-marquee {
    animation: services-marquee 32s linear infinite;
  }

  @media (max-width: 767px) {
    .animate-services-marquee {
      animation-duration: 24s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-services-marquee {
      animation: none;
    }
  }
}