@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";

/* Raleway Font Import */
@font-face {
  font-family: "Raleway";
  src: url("./assets/fonts/Raleway-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: url("./assets/fonts/Raleway-Italic-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
}

@custom-variant dark (&:is(.dark *));

@theme {
  --font-raleway: "Raleway", system-ui, -apple-system, sans-serif;
}

/* Color System */
:root {
  /* Primary Colors */
  --primary: #800020;
  --primary-dark: #580013;
  --primary-light: #b3002d;

  /* Secondary Colors */
  --white-text-primary: #e6e6e6;
  --text-primary: #424040;
  --bg-light: #f7f5f0;
  --bg-primary: #242424;
  --bg-section: #e3dcca;
  --nav-bg: #242424;

  /* Gradients - Linear */
  --gradient-1: linear-gradient(90deg, #42000e 0%, #800020 100%);
  --gradient-2: linear-gradient(180deg, #800020 0%, #1a0007 100%);
  --gradient-btn: linear-gradient(90deg, #580013 0%, #7f001f 100%);

  /* Gradients - Radial */
  --gradient-radial: radial-gradient(
    54.97% 54.97% at 50% 45.03%,
    #b3002d 0%,
    #4d0013 100%
  );

  /* Borders */
  --border: #e3dcca;
}

/* Typography Layer */
@layer utilities {
  /* Headings - Use font-raleway (the utility class will be font-raleway) */
  .h1 {
    @apply font-raleway text-4xl leading-tight font-semibold tracking-tight text-(--primary) md:text-6xl;
  }

  .white-h1 {
    @apply font-raleway text-4xl leading-tight font-semibold tracking-tight text-(--white-text-primary) md:text-6xl;
  }

  .h2 {
    @apply font-raleway text-[43px] leading-tight font-semibold tracking-tight text-(--primary);
  }

  .h3 {
    @apply font-raleway text-lg font-semibold tracking-normal text-(--primary);
  }

  /* Body Text */
  .body-text {
    @apply font-raleway text-sm leading-relaxed text-(--black-text-primary) md:text-xl;
  }

  .white-body-text {
    @apply font-raleway text-sm leading-relaxed text-(--white-text-primary) md:text-xl;
  }

  .body-small {
    @apply font-raleway text-base leading-normal text-(--black-text-primary);
  }

  .white-body-small {
    @apply font-raleway text-base leading-normal text-(--text-primary);
  }

  .nav-link {
    @apply font-raleway text-lg font-medium;
  }

  /* Button Utilities */
  .btn-primary {
    @apply font-raleway rounded-lg bg-(--primary) px-6 py-3 font-semibold text-white transition-opacity hover:opacity-90;
  }

  .btn-gradient {
    @apply font-raleway rounded-sm px-10 py-3 font-semibold text-white transition-opacity hover:opacity-90;
    background: var(--gradient-btn);
  }

  .btn-ghost {
    @apply font-raleway rounded-lg px-4 py-2 font-medium text-(--text-primary) transition-colors hover:bg-(--bg-section);
  }

  /* Color Utilities */
  .text-primary {
    @apply text-(--text-primary);
  }

  .bg-primary {
    @apply bg-(--primary);
  }

  .border-primary {
    @apply border-(--border);
  }

  .footer-h2 {
    @apply mb-3 text-base font-semibold tracking-wide text-[#FFB2C6] uppercase;
  }

  .footer-p {
    @apply text-sm leading-relaxed text-white/80 transition hover:text-[#FFB2C6];
  }
}

body {
  margin: 0;
  font-family:
    "Raleway",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-light);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE CONTAINER & LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════ */

/* Main container with responsive max-width and padding */
@layer components {
  .container-main {
    @apply mx-auto w-full max-w-[1440px] px-4 sm:px-6 md:px-8 lg:px-[120px];
  }

  .container-hero {
    @apply mx-auto w-full max-w-[1320px] px-4 sm:px-6 md:px-8 lg:px-[60px];
  }

  /* Responsive text sizes */
  .text-h1-sm {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl;
  }

  .text-h2-sm {
    @apply text-2xl sm:text-3xl md:text-[40px] lg:text-[43px];
  }

  .text-h3-sm {
    @apply text-lg sm:text-xl md:text-2xl;
  }

  .text-body-sm {
    @apply text-sm sm:text-base md:text-lg lg:text-xl;
  }

  /* Responsive gap utilities */
  .gap-responsive {
    @apply gap-4 sm:gap-6 md:gap-8 lg:gap-10;
  }

  /* Grid responsive utilities */
  .grid-responsive-2 {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2;
  }

  .grid-responsive-3 {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
  }

  .grid-responsive-4 {
    @apply grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
  }

  /* Touch target minimum (44px for mobile accessibility) */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }

  /* Focus states for keyboard navigation */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-[#800020] focus:ring-offset-2;
  }

  /* Responsive padding sections */
  .section-padding {
    @apply py-12 sm:py-16 md:py-20 lg:py-20;
  }

  /* Image responsive utilities */
  .img-responsive {
    @apply h-full w-full object-cover;
  }

  .img-responsive-contain {
    @apply h-full w-full object-contain;
  }
}

/* Prevents nav links from shifting layout when toggling between font-medium and font-bold.
   The ::after pseudo-element renders the bold text invisibly so the element always
   reserves the bold width, keeping surrounding elements stable. */
.nav-stable-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.nav-stable-link::after {
  content: attr(data-text);
  font-weight: 700;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  speak: none;
}

/* Anticlockwise continuous orbital rotation around main circle (306px, 288px) */
/* Calculated for smooth circular orbit with consistent speed */

@keyframes orbitTopLeftAnticlockwise {
  0% {
    top: 25px;
    left: 59px;
  }
  12.5% {
    top: 0px;
    left: 180px;
  }
  25% {
    top: 30px;
    left: 340px;
  }
  37.5% {
    top: 180px;
    left: 400px;
  }
  50% {
    top: 350px;
    left: 340px;
  }
  62.5% {
    top: 400px;
    left: 180px;
  }
  75% {
    top: 380px;
    left: 20px;
  }
  87.5% {
    top: 200px;
    left: -20px;
  }
  100% {
    top: 25px;
    left: 59px;
  }
}

@keyframes orbitTopRightAnticlockwise {
  0% {
    top: 18px;
    left: 398px;
  }
  12.5% {
    top: 100px;
    left: 430px;
  }
  25% {
    top: 250px;
    left: 410px;
  }
  37.5% {
    top: 380px;
    left: 280px;
  }
  50% {
    top: 400px;
    left: 120px;
  }
  62.5% {
    top: 310px;
    left: 0px;
  }
  75% {
    top: 120px;
    left: 30px;
  }
  87.5% {
    top: 20px;
    left: 160px;
  }
  100% {
    top: 18px;
    left: 398px;
  }
}

@keyframes orbitBottomLeftAnticlockwise {
  0% {
    top: 363px;
    left: 9px;
  }
  12.5% {
    top: 400px;
    left: 120px;
  }
  25% {
    top: 380px;
    left: 280px;
  }
  37.5% {
    top: 250px;
    left: 410px;
  }
  50% {
    top: 100px;
    left: 430px;
  }
  62.5% {
    top: 20px;
    left: 340px;
  }
  75% {
    top: 30px;
    left: 180px;
  }
  87.5% {
    top: 180px;
    left: 50px;
  }
  100% {
    top: 363px;
    left: 9px;
  }
}

@keyframes orbitBottomRightAnticlockwise {
  0% {
    top: 368px;
    left: 388px;
  }
  12.5% {
    top: 380px;
    left: 280px;
  }
  25% {
    top: 350px;
    left: 120px;
  }
  37.5% {
    top: 200px;
    left: 30px;
  }
  50% {
    top: 20px;
    left: 100px;
  }
  62.5% {
    top: 0px;
    left: 240px;
  }
  75% {
    top: 50px;
    left: 380px;
  }
  87.5% {
    top: 250px;
    left: 430px;
  }
  100% {
    top: 368px;
    left: 388px;
  }
}

.orbit-top-left {
  animation: orbitTopLeftAnticlockwise 24s linear infinite;
}

.orbit-top-right {
  animation: orbitTopRightAnticlockwise 24s linear infinite;
}

.orbit-bottom-left {
  animation: orbitBottomLeftAnticlockwise 24s linear infinite;
}

.orbit-bottom-right {
  animation: orbitBottomRightAnticlockwise 24s linear infinite;
}