@use '../mixins/mediaquery' as *;

:root{
    --fs-9xl    : 12.8rem;
    --fs-8xl    : 9.6rem;
    --fs-7xl    : 7.2rem;
    --fs-6xl    : 6rem;
    --fs-5xl    : 4.8rem;
    --fs-4xl    : 3.6rem;
    --fs-3xl    : 3rem;
    --fs-2xl    : 2.4rem;
    --fs-xl     : 2rem;
    --fs-lg     : 1.8rem;
    --fs-base   : 1.6rem;
    --fs-sm     : 1.4rem;
    --fs-xs     : 1.2rem;

}

@include mq(tablet) {
    :root {
        --fs-9xl    : 10.24rem; /* 102.4px (was 128px) */
        --fs-8xl    : 8rem;     /* 80px (was 96px) */
        --fs-7xl    : 6rem;     /* 60px (was 72px) */
        --fs-6xl    : 4.8rem;   /* 48px (was 60px) */
        --fs-5xl    : 3.6rem;   /* 36px (was 48px) */
        --fs-4xl    : 3rem;     /* 30px (was 36px) */
        --fs-3xl    : 2.4rem;   /* 24px (was 30px) */
        --fs-2xl    : 2rem;     /* 20px (was 24px) */
        --fs-xl     : 1.8rem;   /* 18px (was 20px) */
        --fs-lg     : 1.6rem;   /* 16px (was 18px) */
        --fs-base   : 1.6rem;   /* 16px (same) */
        --fs-sm     : 1.4rem;   /* 14px (same) */
        --fs-xs     : 1.2rem;   /* 12px (same) */

    }
}

/* Mobile - Aggressive Scaling (reduce by ~40-50%) */
@include mq(mobile) {
    :root {
        --fs-9xl    : 7.2rem;   /* 72px (was 128px) */
        --fs-8xl    : 6rem;     /* 60px (was 96px) */
        --fs-7xl    : 4.8rem;   /* 48px (was 72px) */
        --fs-6xl    : 3.6rem;   /* 36px (was 60px) */
        --fs-5xl    : 3rem;     /* 30px (was 48px) */
        --fs-4xl    : 2.4rem;   /* 24px (was 36px) */
        --fs-3xl    : 2rem;     /* 20px (was 30px) */
        --fs-2xl    : 1.8rem;   /* 18px (was 24px) */
        --fs-xl     : 1.6rem;   /* 16px (was 20px) */
        --fs-lg     : 1.6rem;   /* 16px (was 18px) */
        --fs-base   : 1.4rem;   /* 16px (same) */
        --fs-sm     : 1.2rem;   /* 14px (same) */
        --fs-xs     : 1.2rem;   /* 12px (same) */
        
    }
}