src/css/typography.css

/**
 * Apache Ignite Typography
 * Font system extracted from legacy site
 *
 * Typography scale is based on a 10px root font size (1rem = 10px)
 * which allows for precise control over sizing throughout the site.
 */

:root {
  /* === Font Families === */
  /* Primary font stack - Arial fallback system */
  --ai-font-primary: Arial, Helvetica, sans-serif;

  /* Monospace font for code blocks */
  --ai-font-mono: Monaco, 'Courier New', monospace;

  /* === Fluid Font Sizes === */
  /* Scales smoothly between viewport widths using clamp() */
  /* Format: clamp(min, preferred, max) */
  /* Eliminates need for most media query font-size overrides */
  --ai-text-xs: clamp(1rem, 0.9rem + 0.25vw, 1.2rem);      /* 10-12px */
  --ai-text-sm: clamp(1.2rem, 1.1rem + 0.3vw, 1.4rem);     /* 12-14px */
  --ai-text-base: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem);   /* 14-16px */
  --ai-text-lg: clamp(1.6rem, 1.4rem + 0.3vw, 1.7rem);     /* 16-17px */
  --ai-text-xl: clamp(1.7rem, 1.5rem + 0.5vw, 2rem);       /* 17-20px */
  --ai-text-2xl: clamp(2rem, 1.8rem + 0.6vw, 2.4rem);      /* 20-24px */
  --ai-text-3xl: clamp(2.4rem, 2rem + 1vw, 3rem);          /* 24-30px */
  --ai-text-4xl: clamp(3rem, 2.5rem + 1.5vw, 4rem);        /* 30-40px */
  --ai-text-5xl: clamp(3.6rem, 3rem + 2vw, 4.8rem);        /* 36-48px */
  --ai-text-6xl: clamp(4.5rem, 4rem + 2.5vw, 6rem);        /* 45-60px */
  --ai-text-7xl: clamp(5.5rem, 5rem + 2.5vw, 7rem);        /* 55-70px */
  --ai-text-8xl: clamp(6rem, 5.5rem + 3vw, 8rem);          /* 60-80px */

  /* === Fluid Line Heights === */
  /* Also scale smoothly with viewport */
  --ai-leading-tight: clamp(1.1, 1.05 + 0.1vw, 1.15);
  --ai-leading-snug: clamp(1.15, 1.1 + 0.1vw, 1.2);
  --ai-leading-normal: clamp(1.4, 1.3 + 0.2vw, 1.5);
  --ai-leading-relaxed: clamp(1.5, 1.4 + 0.2vw, 1.6);
  --ai-leading-loose: clamp(1.6, 1.5 + 0.25vw, 1.75);

  /* === Font Weights === */
  --ai-font-normal: 400;
  --ai-font-bold: 700;

  /* === Letter Spacing === */
  --ai-tracking-normal: normal;
  --ai-tracking-wide: 2px;
}

/* === Base Typography Reset === */
html {
  /* Fluid root font size scales from 8px to 10px based on viewport */
  /* Replaces media query overrides at 1199px (9px) and 992px (8px) */
  font-size: clamp(8px, 0.7vw + 7px, 10px);
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

body {
  font-family: var(--ai-font-primary);
  font-size: var(--ai-text-base);
  line-height: 2.4rem;
  color: var(--ai-text-primary);
  font-weight: var(--ai-font-normal);
}

/* === Heading Styles === */
/* Default heading sizes for content pages (blog, docs, etc.) */

h1 {
  font-size: 4rem;
  line-height: 1.2;
  font-weight: var(--ai-font-bold);
  margin: 0;
}

h2 {
  font-size: 3rem;
  line-height: 1.3;
  font-weight: var(--ai-font-bold);
  margin: 0;
}

h3 {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: var(--ai-font-bold);
  margin: 0;
}

h4 {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: var(--ai-font-bold);
  margin: 0;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: var(--ai-font-bold);
  margin: 0;
}

/* === Hero Heading Classes === */
/* Large heading sizes for landing pages and hero sections */

.h1,
.hero-h1 {
  font-size: var(--ai-text-8xl);
  line-height: 9.4rem;
  font-weight: var(--ai-font-normal);
  margin: 0;
}

.h2,
.hero-h2 {
  font-size: var(--ai-text-6xl);
  line-height: var(--ai-text-7xl);
  font-weight: var(--ai-font-normal);
  margin: 0;
}

.h3,
.hero-h3 {
  font-size: var(--ai-text-5xl);
  line-height: 6.4rem;
  font-weight: var(--ai-font-normal);
  margin: 0;
}

.h4,
.hero-h4 {
  font-size: var(--ai-text-3xl);
  line-height: var(--ai-text-4xl);
  font-weight: var(--ai-font-normal);
  margin: 0;
}

.h5,
.hero-h5 {
  font-size: var(--ai-text-2xl);
  line-height: 3.4rem;
  font-weight: var(--ai-font-normal);
  margin: 0;
}

/* === Utility Font Size Classes === */
/* Pre-defined font sizes for consistent sizing */

.fz20 {
  font-size: var(--ai-text-xl);
  line-height: 2.6rem;
}

.fz30 {
  font-size: var(--ai-text-3xl);
  line-height: 4.2rem;
}

.fz40 {
  font-size: var(--ai-text-4xl);
  line-height: 5rem;
}

.fz50 {
  font-size: 5rem;
  line-height: 5.5rem;
}

.fz60 {
  font-size: var(--ai-text-6xl);
  line-height: var(--ai-text-7xl);
}

/* === Text Utilities === */

/* Capitalized text with letter spacing */
.capstext {
  font-size: var(--ai-text-base);
  line-height: 1;
  letter-spacing: var(--ai-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--ai-font-normal);
  padding-bottom: 1.2rem;
}

/* Line clamping utilities */
.maxline2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.maxline3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* Emphasis */
em {
  font-style: italic;
}

/* === Responsive Typography === */

/*
 * PHASE 3 OPTIMIZATION: Most responsive typography is now handled by
 * fluid clamp() values in the CSS variables above. This eliminates
 * the need for most media query overrides.
 *
 * Only keep media queries for layout changes, not font-size adjustments.
 */

/* Mobile-specific line height adjustments */
@media (max-width: 767px) {
  /* Adjust line heights for better mobile readability */
  .h5,
  h5 {
    line-height: 1.4;
  }

  .capstext {
    line-height: var(--ai-leading-normal);
  }
}