/* =========================
   GLOBAL TYPOGRAPHY SYSTEM
   ========================= */

/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;600&display=swap');

/* =========================
   ROOT TYPE SCALE
   ========================= */
:root {
  /* Base font sizes (all shifted upward) */
  --font-base: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);   /* ~20–24px */
  --font-sm: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* ~16–18px */
  --font-md: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);         /* ~24–32px */
  --font-lg: clamp(2rem, 1.5rem + 1vw, 2.5rem);           /* ~32–40px */
  --font-xl: clamp(2.5rem, 2rem + 1.5vw, 3rem);           /* ~40–48px */
  --font-xxl: clamp(3rem, 2.4rem + 2vw, 3.75rem);         /* ~48–60px */

  /* Line heights */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* Font weights */
  --fw-light: 300;
  --fw-semibold: 600;

  /* Colors */
  --color-body: #222;
  --color-heading: #04218B;
  --color-accent: #D4AF37;
  --color-white: #ffffff;
}

/* =========================
   GLOBAL FONT APPLICATION
   ========================= */

body {
  font-family: 'Assistant', sans-serif;
  font-weight: var(--fw-light);
  font-size: var(--font-base);
  color: var(--color-body);
  line-height: var(--lh-normal);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.hero-overlay h1,
.header-title,
.section-title {
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  letter-spacing: 0.5px;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* Adjust heading scale */
h1 { font-size: var(--font-xxl); }  /* Hero / Big Headings */
h2 { font-size: var(--font-xl); }   /* Section Titles */
h3 { font-size: var(--font-lg); }   /* Mid Headings */
h4 { font-size: var(--font-md); }
h5 { font-size: var(--font-base); }
h6 { font-size: var(--font-sm); }

/* Body & common text elements */
p, li, span, a, input, button, label {
  font-weight: var(--fw-light);
  font-size: var(--font-base);
  line-height: var(--lh-normal);
  color: var(--color-body);
}

/* =========================
   DARK BACKGROUND TEXT FIX
   ========================= */

/* Automatically apply white text for dark sections */
section[class*="blue"],
section[class*="dark"],
.about-hero,
.tagline-section,
section.bg-dark,
section.bg-blue {
  color: var(--color-white);
}

.about-hero h1,
.about-hero h2,
.about-hero h3,
.about-hero h4,
.about-hero p,
.tagline-section h1,
.tagline-section h2,
.tagline-section h3,
.tagline-section h4,
.tagline-section p {
  color: var(--color-white);
}

/* Preserve accent colors inside dark sections */
.about-hero h1,
.tagline-section h2,
.tagline-section h3 {
  color: var(--color-accent);
}

/* Links inside dark backgrounds */
.about-hero a,
.tagline-section a,
section.bg-dark a,
section.bg-blue a {
  color: var(--color-accent);
  text-decoration: underline;
}

.about-hero a:hover,
.tagline-section a:hover,
section.bg-dark a:hover,
section.bg-blue a:hover {
  color: var(--color-white);
  text-decoration: none;
}