/* ==========================================================================
   Typography - Modular type scale and utility classes
   ========================================================================== */

:root {
	/* Font families */
	--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

	/* Modular type scale (1.125 ratio) */
	--text-xs: 0.79em;
	--text-sm: 0.889em;
	--text-base: 1em;
	--text-lg: 1.125em;
	--text-xl: 1.25em;
	--text-2xl: 1.4em;
	--text-3xl: 1.6em;

	/* Font weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
}


/* ==========================================================================
   Base typography
   ========================================================================== */

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: var(--font-semibold);
	line-height: 1.25;
	color: var(--text-primary);
}

h1 {
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
}

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

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

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


/* ==========================================================================
   Typography utility classes
   ========================================================================== */

/* Font families */
.font-sans {
	font-family: var(--font-sans);
}

.font-mono {
	font-family: var(--font-mono);
}

/* Font sizes */
.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);
}

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

/* Font weights */
.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);
}

/* Text colors */
.text-primary {
	color: var(--text-primary);
}

.text-secondary {
	color: var(--text-secondary);
}

.text-muted {
	color: var(--text-muted);
}

.text-accent {
	color: var(--accent);
}

.text-success {
	color: var(--success);
}

.text-warning {
	color: var(--warning);
}

.text-danger {
	color: var(--danger);
}

/* Text styling */
.text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.text-capitalize {
	text-transform: capitalize;
}

.text-gradient {
	background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.text-italic {
	font-style: italic;
}

.text-nowrap {
	white-space: nowrap;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}


/* ==========================================================================
   Labels (form labels, small text)
   ========================================================================== */

label,
.text-label {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
}


/* ==========================================================================
   Links
   ========================================================================== */

a {
	color: var(--accent);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}