/* 1. Base font family */
:root {
    --font-family-base: 'Transgourmet', sans-serif;
}

/* 2. Mobile-first typography (0–719px) */
:root {
    /* Title levels */
    --font-size-title-1: 32px;
    --line-height-title-1: 33px;
    --font-weight-title-1: 700;
    
    --font-size-title-2: 28px;
    --line-height-title-2: 32px;
    --font-weight-title-2: 700;
    
    --font-size-title-3: 24px;
    --line-height-title-3: 30px;
    --font-weight-title-3: 700;
    
    --font-size-title-4: 22px;
    --line-height-title-4: 28px;
    --font-weight-title-4: 700;
    
    --font-size-title-5: 20px;
    --line-height-title-5: 26px;
    --font-weight-title-5: 700;
    
    --font-size-title-6: 18px;
    --line-height-title-6: 22px;
    --font-weight-title-6: 700;

    /* Headline */
    --font-size-headline: 10px;
    --line-height-headline: 16px;
    --font-weight-headline: 700;
    --letter-spacing-headline: 0.1em;
    --text-transform-headline: uppercase;

    /* Giga Text */
    --font-size-giga: 96px;
    --line-height-giga: 100px;
    --font-weight-giga: 400;
    --font-weight-giga-bold: 700;
    /* Mega Text */
    --font-size-mega: 60px;
    --line-height-mega: 80px;
    --font-weight-mega: 400;
    --font-weight-mega-bold: 700;

    /* Large Text */
    --font-size-large: 18px;
    --line-height-large: 24px;
    --font-weight-large: 400;
    --font-weight-large-bold: 700;
    --font-style-large-italic: italic;

    /* Medium Text */
    --font-size-medium: 16px;
    --line-height-medium: 22px;
    --font-weight-medium: 400;
    --font-weight-medium-bold: 700;
    --font-style-medium-italic: italic;

    /* Normal Text */
    --font-size-normal: 16px;
    --line-height-normal: 20px;
    --font-weight-normal: 400;
    --font-weight-normal-bold: 700;
    --font-style-normal-italic: italic;

    /* Small Text */
    --font-size-small: 14px;
    --line-height-small: 20px;
    --font-weight-small: 400;
    --font-weight-small-bold: 700;
    --font-style-small-italic: italic;

    /* Link Styles */
    --text-decoration-link: underline;

    /* Paragraphs */
    --font-size-paragraph-small: 14px;
    --line-height-paragraph-small: 20px;
    
    --font-size-paragraph-default: 16px;
    --line-height-paragraph-default: 22px;
    
    --font-size-paragraph-large: 18px;
    --line-height-paragraph-large: 24px;
    --font-style-paragraph-large-italic: italic;
    
    --font-size-paragraph-huge: 24px;
    --line-height-paragraph-huge: 36px;
    
    --font-size-paragraph-giga: 96px;
    --line-height-paragraph-giga: 100px;
    --font-weight-paragraph-giga-bold: 700;
}

/* 3. Tablet overrides (720px to 959px) */
@media (min-width: 720px) {
    :root {
        --font-size-title-1: 46px;
        --line-height-title-1: 58px;
        
        --font-size-title-2: 38px;
        --line-height-title-2: 46px;
        
        --font-size-title-3: 30px;
        --line-height-title-3: 38px;
        
        --font-size-headline: 12px;
        --line-height-headline: 16px;
        
        --font-size-body: 16px;
        /* Note: --line-height-body wasn't defined in mobile */
        --line-height-body: 24px;
    }
}

/* 4. Desktop overrides (960px+) */
@media (min-width: 960px) {
    :root {
        --font-size-title-1: 56px;
        --line-height-title-1: 64px;
        
        --font-size-title-2: 48px;
        --line-height-title-2: 54px;
        --letter-spacing-title-2: -2%;
        
        --font-size-title-3: 36px;
        --line-height-title-3: 46px;
        
        --font-size-headline: 12px;
        --line-height-headline: 16px;
        
        --font-size-body: 16px;
        --line-height-body: 24px;
    }
}

/* 5. Semantic elements and utility classes */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--font-size-title-1);
    line-height: var(--line-height-title-1);
    font-weight: var(--font-weight-title-1);
}

h2 {
    font-size: var(--font-size-title-2);
    line-height: var(--line-height-title-2);
    font-weight: var(--font-weight-title-2);
    letter-spacing: var(--letter-spacing-title-2, 0);
}

h3 {
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    font-weight: var(--font-weight-title-3);
}

h4 {
    font-size: var(--font-size-title-4);
    line-height: var(--line-height-title-4);
    font-weight: var(--font-weight-title-4);
}

h5 {
    font-size: var(--font-size-title-5);
    line-height: var(--line-height-title-5);
    font-weight: var(--font-weight-title-5);
}

h6 {
    font-size: var(--font-size-title-6);
    line-height: var(--line-height-title-6);
    font-weight: var(--font-weight-title-6);
}

/* Text utilities */
.headline, .text-headline {
    font-family: var(--font-family-base);
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    font-weight: var(--font-weight-headline);
    letter-spacing: var(--letter-spacing-headline);
    text-transform: var(--text-transform-headline);
    margin-bottom: 0.5em;
}

/* Size-based utilities */
[class*="text-"], [class*="paragraph-"] {
    font-family: var(--font-family-base);
}

/* Giga Text Styles */
.text-giga {
    font-size: var(--font-size-giga);
    line-height: var(--line-height-giga);
    font-weight: var(--font-weight-giga);
}

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

/* Mega Text Styles */
.text-mega {
    font-size: var(--font-size-mega);
    line-height: var(--line-height-mega);
    font-weight: var(--font-weight-mega);
}

.text-mega-bold {
    font-size: var(--font-size-mega);
    font-weight: var(--font-weight-mega-bold);
}
.text-medium {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-medium);
}
.text-medium-bold {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium-bold);
}
/* Paragraph Styles */
.paragraph-giga {
    font-size: var(--font-size-paragraph-giga);
    line-height: var(--line-height-paragraph-giga);
    font-weight: var(--font-weight-giga);
}

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


/* Text variants */
[class*="-bold"] {
    font-weight: var(--font-weight-bold, 700);
}

[class*="-italic"] {
    font-style: italic;
}



/* Paragraph utilities */
.paragraph-small {
    font-size: var(--font-size-paragraph-small);
    line-height: var(--line-height-paragraph-small);
}

.paragraph-default {
    font-size: var(--font-size-paragraph-default);
    line-height: var(--line-height-paragraph-default);
}

.paragraph-large {
    font-size: var(--font-size-paragraph-large);
    line-height: var(--line-height-paragraph-large);
}

.paragraph-huge {
    font-size: var(--font-size-paragraph-huge);
    line-height: var(--line-height-paragraph-huge);
}
.paragraph-giga {
    font-family: var(--font-family-base);
    font-size: var(--font-size-paragraph-giga);
    line-height: var(--line-height-paragraph-giga);
    letter-spacing: var(--letter-spacing-paragraph-giga);
    font-weight: var(--font-weight-paragraph-giga);
}

.paragraph-giga-bold {
    font-family: var(--font-family-base);
    font-size: var(--font-size-paragraph-giga);
    line-height: var(--line-height-paragraph-giga);
    letter-spacing: var(--letter-spacing-paragraph-giga);
    font-weight: var(--font-weight-paragraph-giga-bold);
}