/* Typography Scale */
:root {
    /* Base Sizes */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --font-size-lg: clamp(1.25rem, 1.125rem + 0.75vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --font-size-2xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
    --font-size-3xl: clamp(2.5rem, 2rem + 1.5vw, 3rem);
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Fluid Spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    --space-md: clamp(1rem, 0.8rem + 1vw, 2rem);
    --space-lg: clamp(2rem, 1.6rem + 2vw, 4rem);
    --space-xl: clamp(4rem, 3.2rem + 4vw, 8rem);
    
    /* Content Widths */
    --content-xs: min(100% - 2rem, 20rem);
    --content-sm: min(100% - 2rem, 30rem);
    --content-md: min(100% - 2rem, 45rem);
    --content-lg: min(100% - 2rem, 65rem);
    --content-xl: min(100% - 2rem, 80rem);
}

/* Body Text */
body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Headings */
h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-md);
}

h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-sm);
}

h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-sm);
}

h4 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-sm);
}

/* Section Spacing */
section {
    padding: var(--space-lg) 0;
}

.section-tight {
    padding: var(--space-md) 0;
}

.section-loose {
    padding: var(--space-xl) 0;
}

/* Component Spacing */
.stack > * + * {
    margin-top: var(--space-md);
}

.stack-sm > * + * {
    margin-top: var(--space-sm);
}

.stack-lg > * + * {
    margin-top: var(--space-lg);
}

/* Content Sizing */
.content-narrow {
    width: var(--content-md);
    margin-inline: auto;
}

.content-wide {
    width: var(--content-lg);
    margin-inline: auto;
}

/* Text Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Spacing Utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

/* Gap Utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }