/*
 * Golden Ratio Typography & Fibonacci Spacing System
 * Base: 16px | φ = 1.618
 * Spacing: Fibonacci sequence
 */

 
html {
    font-size: 14px;
}

:root {
    
    /* Golden Ratio Typography Scale */
    --font-xs:      1rem;    /* 10px - φ⁻² */
    --font-sm:      1rem;    /* 13px - φ⁻¹ */
    --font-base:    1rem;        /* 16px - φ⁰ */
    --font-md:      1.272rem;    /* 20px - φ⁰·⁵ */
    --font-lg:      1.618rem;    /* 26px - φ¹ */
    --font-xl:      2.618rem;    /* 42px - φ² */
    --font-2xl:     4.236rem;    /* 68px - φ³ */
    --font-3xl:     6.854rem;    /* 110px - φ⁴ */
    
    /* Fibonacci Spacing Scale */
    --space-1: 0.313rem;     /* 5px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.813rem;     /* 13px */
    --space-4: 1.313rem;     /* 21px */
    --space-5: 2.125rem;     /* 34px */
    --space-6: 3.438rem;     /* 55px */
    --space-7: 5.563rem;     /* 89px */
    
    /* Line Heights (Golden Ratio) */
    --lh-tight: 1.272;       /* φ⁰·⁵ for headings */
    --lh-normal: 1.618;      /* φ for body text */
    --lh-loose: 2.058;       /* φ × 1.272 for display text */
    
    /* Animation Timing */
    --timing-fast: 0.2s;
    --timing-normal: 0.3s;
    --timing-slow: 0.5s;
}



/*
 * Responsive Typography System
 * Golden Ratio scale adjustments per breakpoint
 */

/* Desktop (default) - defined in custom.css */

/* Tablet: 768px - 991px */
@media (max-width: 991px) {

    html {
        font-size: 14px;
    }

    :root {
        --font-xs:   1rem;
        --font-sm:   1rem;
        --font-base: 1rem;
        --font-md:   1.8rem;
        --font-lg:   2rem;
        --font-xl:   3rem;
        --font-2xl:  6rem;
        --font-3xl:  9rem;
    }
}

/* Mobile: up to 767px  */
@media (max-width: 767px) {

    html {
        font-size: 14px;
    }

    :root {
        --font-xs:   0.6rem;
        --font-sm:   0.7rem;
        --font-base: 0.8rem;
        --font-md:   1rem;
        --font-lg:   1.4rem;
        --font-xl:   1.83rem;
        --font-2xl:  2.97rem;
        --font-3xl:  4.80rem;
    }
}

/* Extra small mobile: up to 575px */
@media (max-width: 575px) {

    html {
        font-size: 12px;
    }

    :root {
        --font-xs:   0.8rem;
        --font-sm:   1rem;
        --font-base: 1rem;
        --font-md:   1.8rem;
        --font-lg:   1.4rem;
        --font-xl:   1.83rem;
        --font-2xl:  2.97rem;
        --font-3xl:  4.80rem;
    }
}