/* ========================================
   KARMAVYAA — Design Tokens
   Shared variables for typography, spacing,
   and responsive utilities.
   ======================================== */

:root {
  /* === 8pt Spacing Scale === */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 2.5rem;    /* 40px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 5rem;      /* 80px */

  /* === Fluid Typography Scale (clamp) — MD3 aligned === */
  /* Body & Label — stays modest, never oversized */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11 → 12  Label Small */
  --text-sm:   clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem);     /* 12 → 14  Label Medium */
  --text-base: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);  /* 14 → 15  Body Medium */
  --text-md:   clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15 → 16  Body Large */
  --text-lg:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 16 → 18  Title Small */
  /* Heading & Display — big, commanding */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.63vw, 1.5rem);       /* 20 → 24  Title Large */
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.25vw, 2rem);          /* 24 → 32  Headline Small */
  --text-3xl:  clamp(1.75rem, 1.35rem + 1.75vw, 2.5rem);      /* 28 → 40  Headline Large */
  --text-4xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);             /* 32 → 48  Display Small */
  --text-5xl:  clamp(2.25rem, 1.5rem + 3.75vw, 3.5625rem);    /* 36 → 57  Display Large */
}



/* === Utility: founder name & text (replaces inline styles) === */
.founder-name {
  font-size: var(--text-3xl);
}
.founder-text {
  font-size: var(--text-md);
}

/* === Fix: force scrollbar always present → consistent viewport width on every page ===
   scrollbar-gutter: stable has no effect when html overflow is 'visible' (CSS spec).
   overflow-y: scroll is the only reliable cross-browser way to lock viewport width.
   overflow-x: hidden prevents any horizontal scrollbar. */
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* === Fix: nav font & size consistency across all pages === */
/* Some pages use Roboto body font, others use Inter.
   Force the navbar to always render in Inter at a fixed size so
   neither font-family nor vw-based clamp() causes nav shifts. */
.navbar,
.nav-links a,
.nav-dropdown > a,
.nav-cta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.nav-links a,
.nav-dropdown > a {
  font-size: 14px;
}

/* === Fix: reserve chevron icon space before Font Awesome loads === */
.dropdown-arrow {
  display: inline-block;
  min-width: 0.55em;
}

/* === Utility: hide decorative shapes on mobile === */
@media (max-width: 768px) {
  .parallax-shapes,
  .parallax-bg,
  .hero-geo-shapes {
    display: none !important;
  }
}