/*
 * === Refactored Typography System ===
 * Font: Lexend
 * Strategy: Simplicity, Clarity, and Accessibility
 * Implementation: Single font, clear fluid scale, sentence case standard.
*/

:root {
  /* --- 1. Single Font Family --- */
  --font-primary: "Lexend", sans-serif;

  /* --- 2. Font Weights & Colors --- */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600; /* Used for headings */

  --text-black: rgb(26 26 26);
  --text-gray: rgb(26 26 26 / 0.75); /* Slightly increased opacity for better contrast */

  /* --- 3. Fluid Typographic Scale (Revised for Clarity) --- */
  /* Formula: clamp(min-rem, calc(base-rem + viewport-factor * vw), max-rem) */
  --text-h1: clamp(2rem, calc(1.5rem + 2.5vw), 3.5rem);      /* 32px → 56px */
  --text-h2: clamp(1.75rem, calc(1.375rem + 1.875vw), 2.5rem); /* 28px → 40px */
  --text-h3: clamp(1.25rem, calc(1.1rem + 0.75vw), 1.75rem);   /* 20px → 28px */

  /* Body text: 16px minimum for accessibility */
  --text-body: clamp(1rem, calc(0.9rem + 0.5vw), 1.125rem); /* 16px → 18px */
  --text-small: clamp(0.875rem, calc(0.8rem + 0.25vw), 1rem); /* 14px → 16px */

  /* Aliases */
  --text-base: var(--text-body);
  --text-sm: var(--text-small);

  /* --- 4. Line Heights (Simplified for Readability) --- */
  --leading-heading: 1.25; /* Unitless for headings */
  --leading-body: 1.7;   /* Unitless for body text, optimal for reading */

  /* Layout */
  --max-w-prose: 48rem;
}


/* === Base Element Styles === */

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-normal);
  color: var(--text-black);
  line-height: var(--leading-heading);
  text-align: left;
  max-width: var(--max-w-prose);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
}

/* Add h4-h6 as needed, following the scale */
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (min-width: 768px) {
  h1, h2 {
    text-align: center;
  margin-left: auto;
  margin-right: auto;
  }
}

/* --- Body & Prose Elements (DRY Principle) --- */
p, li, td, th {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  font-weight: var(--font-normal);
  color: var(--text-gray);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-w-prose);
}

th {
  font-weight: var(--font-medium);
  color: var(--text-black);
}

/* --- Other Elements --- */
small {
  font-size: var(--text-sm);
  color: var(--text-gray);
}

strong {
  font-weight: var(--font-semibold);
  color: var(--text-black);
}

em {
  font-style: italic;
}

/* Links should inherit color and be distinguished by underline */
/* 1. Default link style: NO underline. Applied to nav, footer, buttons, etc. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* html, body {
  min-height: 100%;
}

html {
  background-image: linear-gradient(rgba(255 255 255 / 0.9), rgba(255 255 255 / 0.9)),
                    url('https://imagedelivery.net/g0gCQj5idHNmVzd_1Ea-mg/c7d58cce-299d-4b29-a85f-8cda8b4a0700/public');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

body {
  background-color: transparent;
} */