/* =========================================================
   New Life Advanced Homeo — Color & Type Foundations
   ---------------------------------------------------------
   Trust-led healthcare palette: deep navy authority paired
   with a warm clinical red accent. Imported from Google
   Fonts as the closest match to the live site's stack
   (Montserrat / DM Serif Display).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary navy — trust, clinical authority. Used for
     section backgrounds, headings, and dark surfaces. */
  --navy-900: #1A1453;     /* deepest — about/testimonial bg */
  --navy-800: #221A66;     /* hero gradient bottom */
  --navy-700: #2E2680;     /* hero gradient top */
  --navy-600: #3B3499;     /* card surface on dark */
  --navy-500: #5751B5;     /* hover lift */
  --navy-100: #E6E4F2;     /* tint for FAQ index pills */

  /* Accent red — warm, urgent, action. Reserved for the
     Book Appointment CTA, primary buttons, and the founder
     band. NEVER use for body or large surfaces beyond the
     founder band. */
  --red-600: #C8102E;      /* founder band, deep CTA */
  --red-500: #E63946;      /* primary CTA */
  --red-400: #F25C6B;      /* CTA hover lift */
  --red-100: #FCE3E6;      /* badge tint */

  /* No supporting accents — the brand is intentionally a
     two-color system (navy + red). Tints below cover any
     softer surfaces needed. */

  /* ---------- NEUTRALS ---------- */
  --ink-900: #0F0B2E;      /* near-black, on white */
  --ink-700: #2B2750;      /* body on white */
  --ink-500: #6B6B82;      /* meta / captions */
  --ink-300: #B6B6C4;      /* dividers, FAQ index circles */
  --ink-100: #EEEEF3;      /* hairline borders */
  --paper:   #FFFFFF;
  --paper-tint: #F8F8FB;   /* alt section bg */

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg1: var(--ink-900);            /* primary text on light */
  --fg2: var(--ink-700);            /* body */
  --fg3: var(--ink-500);            /* secondary / meta */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.78);
  --fg-on-dark-3: rgba(255,255,255,0.58);
  --fg-link: var(--navy-700);
  --fg-link-on-dark: #B7B0FF;

  /* ---------- SEMANTIC BACKGROUND ---------- */
  --bg-page: var(--paper);
  --bg-section-dark: var(--navy-900);
  --bg-section-alt: var(--paper-tint);
  --bg-card-dark: var(--navy-600);
  --bg-cta: var(--red-500);
  --bg-cta-hover: var(--red-400);

  /* ---------- BORDERS / RADII ---------- */
  --border-hairline: 1px solid var(--ink-100);
  --border-faq: 1px solid var(--ink-300);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- SHADOW ---------- */
  --shadow-card: 0 8px 24px rgba(26, 20, 83, 0.10);
  --shadow-card-dark: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-cta: 0 6px 18px rgba(230, 57, 70, 0.35);

  /* ---------- SPACING SCALE ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- TYPE FAMILIES ---------- */
  /* Display: DM Serif Display — closest Google Font to the
     "New Life Advanced Homeo" wordmark (a high-contrast
     transitional serif). Used ONLY in the wordmark and rare
     editorial moments. */
  --font-display: "DM Serif Display", "Times New Roman", serif;

  /* UI/body: Montserrat — used everywhere on the site for
     headings, body, buttons, nav. Heavy weights (700–900)
     for headings; 400–500 for body. */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;

  /* Mono: not used in product. Provided for tooling. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (sizes in px) ---------- */
  --t-display: 64px;       /* hero headline */
  --t-h1: 44px;            /* section title (e.g. "FAQ's") */
  --t-h2: 32px;            /* sub-section / card heading */
  --t-h3: 22px;            /* card title (FAQ row, founder name) */
  --t-h4: 18px;            /* utility / nav */
  --t-body: 16px;
  --t-body-sm: 14px;
  --t-meta: 12px;
  --t-eyebrow: 11px;       /* "NEW HOPE FOR DIFFICULT DISEASES" */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-eyebrow: 0.12em;
  --tracking-button: 0.06em;
}

/* =========================================================
   SEMANTIC TYPE — use these classes/tags in components.
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-normal);
  color: var(--fg2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg-on-dark-1);
}

.t-section-title, h1.section-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: var(--leading-snug);
  color: var(--navy-900);
  text-align: center;
}
.t-section-title.on-dark { color: var(--fg-on-dark-1); }

h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}

p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}

.t-body-sm { font-size: var(--t-body-sm); }

.t-meta {
  font-size: var(--t-meta);
  color: var(--fg3);
}

/* Eyebrow — small all-caps label, used in the red pill
   under the wordmark ("NEW HOPE FOR DIFFICULT DISEASES")
   and similar callouts. */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-1);
}

/* Wordmark — the "New Life Advanced Homeo" lockup uses a
   high-contrast serif. Stack lines tight. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: currentColor;
  text-transform: none;
}
.wordmark .line-1 { font-size: 14px; }
.wordmark .line-2 { font-size: 18px; letter-spacing: 0.04em; }

/* Buttons / nav — UPPERCASE, slight tracking, weight 700 */
.t-nav, .t-button {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}