/* =========================================================
   FONTS.CSS
   Single source of truth for typography.
   English: Cinzel (heading) / Cormorant Garamond (display) / Poppins (body)
   Telugu:  Noto Serif Telugu (heading) / Noto Sans Telugu (body)

   Loaded via Google Fonts. If the final hosting environment
   blocks external font requests, swap this @import block for
   local @font-face declarations pointing at /assets/fonts/.
   ========================================================= */

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

:root {
  /* ---------- English type stack ---------- */
  --font-en-heading: 'Cinzel', serif;
  --font-en-display: 'Cormorant Garamond', serif;
  --font-en-body: 'Poppins', sans-serif;

  /* ---------- Telugu type stack ---------- */
  --font-te-heading: 'Noto Serif Telugu', serif;
  --font-te-body: 'Noto Sans Telugu', sans-serif;

  /* ---------- Active stack (switched by language.js via body class) ----------
     Default state = English. The [data-lang="te"] rule below repoints
     these same variables so every component that uses --font-heading /
     --font-body automatically renders correctly in either language
     without needing separate CSS per language. ---------- */
  --font-heading: var(--font-en-heading);
  --font-display: var(--font-en-display);
  --font-body: var(--font-en-body);

  /* ---------- Type scale (fluid, mobile-first) ---------- */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.55rem + 1vw, 2.375rem);
  --fs-2xl: clamp(2.125rem, 1.8rem + 1.6vw, 3.125rem);
  --fs-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* ---------- Line heights ---------- */
  --lh-tight: 1.2;
  --lh-heading: 1.35;
  --lh-body: 1.7;

  /* ---------- Letter spacing (temple headings read better tracked out) ---------- */
  --ls-heading: 0.03em;
  --ls-eyebrow: 0.14em;
}

/* When Telugu is active, html[lang="te"] is set by language.js.
   Repoint the shared heading/body variables to the Telugu stack so
   every existing rule (h1, h2, .btn, nav, etc.) renders correctly
   without duplicate CSS per language. Telugu script also reads more
   comfortably slightly larger and with more line-height. */
html[lang="te"] {
  --font-heading: var(--font-te-heading);
  --font-display: var(--font-te-heading);
  --font-body: var(--font-te-body);
  --lh-body: 1.85;
  --ls-heading: 0em;
}