/* ===========================================
   Typography – Trusted Blue Palette
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Global ---------- */
html {
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-base);               /* typically 1rem */
  line-height: var(--leading-normal);        /* ~1.6 */
  color: var(--color-text);                  /* #0F172A */
  font-weight: var(--weight-regular);        /* 400 */
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);       /* 600 */
  line-height: var(--leading-tight);         /* ~1.25 */
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 {
  font-size: clamp(2.25rem, 5vw, var(--text-5xl));
  font-weight: var(--weight-bold);           /* 700 */
  letter-spacing: -0.03em;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.75rem, 4vw, var(--text-4xl));
  letter-spacing: -0.02em;
}

h3 {
  font-size: clamp(1.35rem, 3vw, var(--text-3xl));
}

h4 {
  font-size: var(--text-2xl);
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
}

/* ---------- Paragraphs ---------- */
p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);        /* #475569 */
  line-height: var(--leading-relaxed);       /* ~1.75 */
}

p.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);          /* ~1.5 */
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

/* ---------- Small / subtle text ---------- */
small,
.text-small {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);         /* #94A3B8 */
}

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }

/* ---------- Font weights ---------- */
.font-light    { font-weight: var(--weight-light); }    /* 300 */
.font-regular  { font-weight: var(--weight-regular); }  /* 400 */
.font-medium   { font-weight: var(--weight-medium); }   /* 500 */
.font-semibold { font-weight: var(--weight-semibold); } /* 600 */
.font-bold     { font-weight: var(--weight-bold); }     /* 700 */

/* ---------- Alignment ---------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---------- Color helpers (Trusted Blue) ---------- */
.text-primary   { color: var(--color-primary); }          /* #2563EB */
.text-secondary { color: var(--color-text-secondary); }   /* #475569 */
.text-tertiary  { color: var(--color-text-tertiary); }    /* #94A3B8 */
.text-success   { color: var(--color-success); }          /* #10B981 */
.text-error     { color: var(--color-error); }            /* #EF4444 */

/* ---------- Links ---------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Prose / article content ---------- */
.prose {
  max-width: 65ch;
}

.prose p {
  margin-bottom: var(--space-6);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Line clamp utility ---------- */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}