/* Typography System
   Updated for uniformity, trust, and quiet confidence.
*/

/* 1. Font Imports */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700; /* Loading 400, 500, 600, 700 */
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v22/cY9tkP-3o2lP-bEljsg9f__2f-r-oA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/

/* 2. Font Variables */
:root {
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  
  /* 3. Fluid Type Scale (Refined) */
  /* Base size: 16px on mobile up to 18px on desktop */
  --font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  
  /* Scale based on a consistent modular ratio (1.25) */
  --font-size-sm:   clamp(0.8rem, 0.77rem + 0.13vw, 0.9rem);    /* ~14.4px */
  --font-size-lg:   clamp(1.25rem, 1.2rem + 0.21vw, 1.406rem);  /* ~22.5px */
  --font-size-xl:   clamp(1.563rem, 1.49rem + 0.31vw, 1.758rem); /* ~28.1px */
  --font-size-2xl:  clamp(1.953rem, 1.85rem + 0.43vw, 2.197rem); /* ~35.1px */
  --font-size-3xl:  clamp(2.441rem, 2.31rem + 0.55vw, 2.746rem); /* ~43.9px */
  --font-size-4xl:  clamp(3.052rem, 2.87rem + 0.77vw, 3.433rem); /* ~54.9px */
}

/* 4. Base typography styles */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400; /* Default weight */
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500; /* Unified heading weight */
  line-height: 1.25;
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.02em; /* Subtle tightening */
}

/* Unified heading sizes */
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin: 0 0 1.5rem 0;
  max-width: 65ch;
  line-height: 1.65; /* Slightly more open for readability */
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500; /* Give links a slight emphasis */
}
a:hover, a:focus { text-decoration: underline; }

/* 5. Specific Utility Classes (Moved from main.css) */

/* Main page/section titles */
.section-title,
.project-title,
.person-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--font-size-3xl); /* Unified to H2 size */
  color: var(--muted);
  letter-spacing: -0.02em;
}
/* Override for .section-title color */
h1.section-title {
  color: var(--muted);
  font-weight: 400;
}
h2.section-title {
  color: var(--muted);
  font-weight: 400;
}

/* Smaller, secondary titles */
.section-title-small,
.person-title,
.project-meta {
  font-family: var(--font-body); /* Use body font for subtitles */
  font-size: var(--font-size-lg);
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 1rem;
}
.section-title-small {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Special Text Elements */
.hero-tagline,
.person-bio,
.project-description {
  font-size: var(--font-size-lg); /* Unified large paragraph size */
  line-height: 1.65;
  max-width: 55ch;
  margin-inline: auto;
}
.person-bio {
  max-width: 50ch;
  margin: 0;
}
.project-description {
  max-width: 60ch;
  margin-bottom: 2rem;
  margin-inline: 0;
}

/* Component-specific text */
.accordion-header {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg); /* Was lg */
  font-weight: 500;
}
.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg); /* Was lg */
  font-weight: 500;
  line-height: 1.4;
}
.timeline-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg); /* Was lg */
  font-weight: 500;
}
.timeline-date {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent);
}