/**
 * StellarLink Media Typography System
 * Defines font families, sizes, weights, and spacing for consistent typography
 */

:root {
	/* Font Families */
	--font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Font Sizes - Mobile First */
	--text-xs: 0.75rem;
	/* 12px */
	--text-sm: 0.875rem;
	/* 14px */
	--text-base: 1rem;
	/* 16px */
	--text-lg: 1.125rem;
	/* 18px */
	--text-xl: 1.25rem;
	/* 20px */
	--text-2xl: 1.5rem;
	/* 24px */
	--text-3xl: 1.875rem;
	/* 30px */
	--text-4xl: 2.25rem;
	/* 36px */
	--text-5xl: 3rem;
	/* 48px */

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Line Heights */
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Letter Spacing */
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
}

/* Desktop adjustments */
@media (min-width: 768px) {
	:root {
		--text-4xl: 2.5rem;
		/* 40px */
		--text-5xl: 3.5rem;
		/* 56px */
	}
}

/* Typography Classes */
.stellarlink-typography {
	font-family: var(--font-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Hero Text */
.hero-text {
	font-family: var(--font-primary);
	font-size: var(--text-4xl);
	font-weight: var(--font-extrabold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

@media (min-width: 768px) {
	.hero-text {
		font-size: var(--text-5xl);
	}
}

/* Section Headers */
.section-header {
	font-family: var(--font-primary);
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
}

@media (min-width: 768px) {
	.section-header {
		font-size: var(--text-3xl);
	}
}

/* Subsection Headers */
.subsection-header {
	font-family: var(--font-primary);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-normal);
}

/* Body Text */
.body-text {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
}

@media (min-width: 768px) {
	.body-text {
		font-size: var(--text-lg);
	}
}

/* Secondary Text */
.secondary-text {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
	opacity: 0.8;
}

/* Button Text */
.button-text {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-wide);
}

/* Navigation Text */
.nav-text {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	line-height: var(--leading-normal);
}

/* Small Text */
.small-text {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
}

/* Utility Classes for Quick Application */
.font-primary {
	font-family: var(--font-primary);
}

.text-hero {
	font-size: var(--text-4xl);
	font-weight: var(--font-extrabold);
	line-height: var(--leading-tight);
}

.text-section {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
}

.text-subsection {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
}

.text-body {
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
}

/* Font weight utilities */
.font-normal {
	font-weight: var(--font-normal);
}

.font-medium {
	font-weight: var(--font-medium);
}

.font-semibold {
	font-weight: var(--font-semibold);
}

.font-bold {
	font-weight: var(--font-bold);
}

.font-extrabold {
	font-weight: var(--font-extrabold);
}

/* Line height utilities */
.leading-tight {
	line-height: var(--leading-tight);
}

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

.leading-relaxed {
	line-height: var(--leading-relaxed);
}

.leading-loose {
	line-height: var(--leading-loose);
}

/* Letter spacing utilities */
.tracking-tight {
	letter-spacing: var(--tracking-tight);
}

.tracking-normal {
	letter-spacing: var(--tracking-normal);
}

.tracking-wide {
	letter-spacing: var(--tracking-wide);
}

/* Responsive typography helpers */
@media (min-width: 768px) {
	.md\:text-hero {
		font-size: var(--text-5xl);
	}

	.md\:text-section {
		font-size: var(--text-3xl);
	}

	.md\:text-body {
		font-size: var(--text-lg);
	}
}

/* Print styles */
@media print {
	.stellarlink-typography {
		font-family: Georgia, 'Times New Roman', serif;
	}
}