@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Fonts */
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Inter', sans-serif;

  /* Colors */
  --color-primary: #475569;
  --color-primary-light: #64748B;
  --color-primary-dark: #334155;
  --color-primary-50: #F3F4F6;
  --color-primary-100: #E5E7EB;
  --color-bg: #F3F4F6;
  --color-bg-dark: #18181B;
  --color-bg-mid: #27272A;
  --color-surface: #FFFFFF;
  --color-surface-alt: #E4E4E7;
  --color-text-primary: #18181B;
  --color-text-secondary: #52525B;
  --color-text-muted: #71717A;
  --color-text-inverse: #FFFFFF;
  --color-border: #CBD5E1;
  --color-border-light: #E4E4E7;

  /* Extra Brand Colors */
  --color-hero-heading: #1C1A18;
  --color-deep-indigo: #262663;
  --color-orange: #F28C28;
  --color-gold-accent: #FFD700;
  --color-dark-indigo: #1A1A4A;
  --color-whatsapp: #25D366;
  --color-accent-gold: #C49A3C;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}

/* Typography Base Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
}

body {
  font-family: var(--font-ui);
  font-weight: 300;
  color: var(--color-text-primary);
  background: linear-gradient(rgba(243, 244, 246, 0.9), rgba(243, 244, 246, 0.9)),
              url('/assets/background/base_bg.png') center/cover fixed no-repeat;
  margin: 0;
  padding: 0;
}

/* Container Shell */
.section-shell {
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .section-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-shell {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation Links Underline Effect */
.nav-link-underline {
  position: relative;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.nav-link-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.nav-link-underline:hover,
.nav-link-underline.active {
  color: var(--color-primary);
}

.nav-link-underline:hover::after,
.nav-link-underline.active::after {
  width: 100%;
}