/* ============================================================
   Vedic Pathway — Typography Tokens
   Bridge the ancient (serif) and the modern/technical (sans).
   Never Cormorant for paragraphs. Never Lato for the main H1.
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;  /* H1–H4, logotype */
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;        /* sparingly: "Welcome" */
  --font-body: 'Lato', system-ui, -apple-system, sans-serif;       /* paragraphs, UI, chat */
  --font-ui: 'Montserrat', 'Lato', system-ui, sans-serif;          /* geometric UI alt */

  /* --- Type scale (px) — 12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 · 82 --- */
  --text-xs: 0.75rem;    /* 12 — disclaimers, legal */
  --text-sm: 0.875rem;   /* 14 — captions, microcopy, labels */
  --text-base: 1rem;     /* 16 — body default */
  --text-md: 1.125rem;   /* 18 — lead body, large UI */
  --text-lg: 1.5rem;     /* 24 — H4, card titles */
  --text-xl: 2rem;       /* 32 — H3 */
  --text-2xl: 3rem;      /* 48 — H2 */
  --text-3xl: 4rem;      /* 64 — H1 */
  --text-display: 5.125rem; /* 82 — hero threshold display */

  /* --- Weights --- */
  --weight-light: 300;   /* Lato Light — default body weight */
  --weight-regular: 400; /* Cormorant Regular — default heading weight */
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Line heights --- */
  --leading-tight: 1.1;   /* display headlines */
  --leading-heading: 1.2; /* H2–H4 */
  --leading-snug: 1.4;    /* UI, buttons */
  --leading-body: 1.7;    /* paragraphs — "let the text breathe" (1.6–1.8) */
  --leading-loose: 1.8;   /* dense astrological data */

  /* --- Letter spacing --- */
  --tracking-tight: -0.01em;  /* large display serif */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;    /* small-caps eyebrows, labels */
  --tracking-wider: 0.18em;   /* SECTION EYEBROWS in Lato */

  /* ============================================================
     Semantic roles
     ============================================================ */
  --type-display: var(--weight-regular) var(--text-display)/var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-regular) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-regular) var(--text-2xl)/var(--leading-heading) var(--font-display);
  --type-h3: var(--weight-medium) var(--text-xl)/var(--leading-heading) var(--font-display);
  --type-h4: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body: var(--weight-light) var(--text-base)/var(--leading-body) var(--font-body);
  --type-lead: var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body);
  --type-caption: var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-body);
  --type-disclaimer: var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-body);
}