@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0D213A;
  --brand-dark: #0D213A;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand-dark: var(--brand-dark);
  --font-sans: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;

  /* Standardized Typography Sizes */
  --text-hero: 5rem;
  /* 80px */
  --text-supporting: 1.25rem;
  /* 20px */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0D213A;
    --foreground: #F8F9FF;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

/* Custom Typography Utilities */
@layer utilities {
  .text-hero-heading {
    @apply text-4xl md:text-6xl lg:text-[80px] font-medium leading-[1.09] tracking-normal capitalize text-brand-dark;
  }

  .text-supporting-text {
    @apply text-base lg:text-[20px] font-medium leading-relaxed text-brand-dark/90;
  }

  .section-heading {
    @apply text-3xl md:text-4xl lg:text-[48px] font-bold leading-tight tracking-tight text-brand-dark;
  }
}

@keyframes infinite-scroll {
  from {
    transform: translateX(0);
  }

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

.animate-infinite-scroll {
  animation: infinite-scroll 25s linear infinite;
}

.pause-on-hover:hover .animate-infinite-scroll {
  animation-play-state: paused;
}

/* Hide scrollbar for horizontal scroll containers */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}