/* Typography Scale (mobile-first)
 * Base size: 16px
 * Fluid typography using clamp() for truly responsive scaling
 * Min viewport: 320px, Max viewport: 1920px
 */
:root {
    /* Font families */
    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Fluid font sizes - scales smoothly between viewport widths */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12px - 14px */
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14px - 16px */
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);        /* 16px - 18px */
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18px - 20px */
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20px - 24px */
    --text-2xl: clamp(1.375rem, 1.2rem + 0.875vw, 1.625rem);   /* 22px - 26px */
    --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);      /* 28px - 36px */
    --text-4xl: clamp(2.0rem, 2.0rem + 3vw, 4.0rem);       /* 36px - 56px */
    
    /* Fluid spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);       /* 4px - 8px */
    --space-sm: clamp(0.375rem, 0.3rem + 0.375vw, 0.75rem);    /* 6px - 12px */
    --space-md: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);           /* 8px - 16px */
    --space-lg: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);       /* 12px - 24px */
    --space-xl: clamp(1rem, 0.8rem + 1vw, 2rem);               /* 16px - 32px */
    
    /* Fluid line heights */
    --leading-none: 1;
    --leading-tight: clamp(1.1, 1.05 + 0.25vw, 1.2);
    --leading-snug: clamp(1.2, 1.15 + 0.25vw, 1.3);
    --leading-normal: clamp(1.3, 1.25 + 0.25vw, 1.4);
    --leading-relaxed: clamp(1.4, 1.35 + 0.25vw, 1.5);
    --leading-loose: clamp(1.5, 1.45 + 0.25vw, 1.6);
    
    /* Font weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Letter spacing */
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.015em;
    --tracking-wider: 0.03em;
}

/* Base styles */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

/* Headings with fluid typography */
h1, .h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-lg);
}

h2, .h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-accent);
}

h3, .h3 {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-sm);
}

/* Paragraphs */
p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-md);
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
}

/* Strong */
strong {
    font-weight: var(--font-semibold);
}

/* Icons */
i {
    line-height: 1;
}

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

/* Special text classes */
.text-lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
}

.text-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}