/* ===== TYPOGRAPHY SCALE (Material-UI) ===== */
        /* Based on Material-UI responsiveFontSizes() with 16px base */
        
        /* h1 - Hero titles */
        .typography-h1 {
            font-family: "Inter", sans-serif;
            font-weight: 700;
            font-size: 2.125rem; /* 34px */
            line-height: 1.167;
            letter-spacing: -0.01562em;
        }
        @media (min-width: 600px) {
            .typography-h1 {
                font-size: 3rem; /* 48px */
            }
        }
        @media (min-width: 900px) {
            .typography-h1 {
                font-size: 3.75rem; /* 60px */
            }
        }
        
        /* h2 - Section headers */
        .typography-h2 {
            font-family: "Inter", sans-serif;
            font-weight: 700;
            font-size: 1.5rem; /* 24px */
            line-height: 1.2;
            letter-spacing: -0.00833em;
        }
        @media (min-width: 600px) {
            .typography-h2 {
                font-size: 2.125rem; /* 34px */
            }
        }
        @media (min-width: 900px) {
            .typography-h2 {
                font-size: 3rem; /* 48px */
            }
        }
        
        /* h3 - Subsection headers */
        .typography-h3 {
            font-family: "Inter", sans-serif;
            font-weight: 600;
            font-size: 1.25rem; /* 20px */
            line-height: 1.167;
            letter-spacing: 0em;
        }
        @media (min-width: 600px) {
            .typography-h3 {
                font-size: 1.5rem; /* 24px */
            }
        }
        @media (min-width: 900px) {
            .typography-h3 {
                font-size: 1.75rem; /* 28px */
            }
        }
        
        /* h4 - Card headers */
        .typography-h4 {
            font-family: "Inter", sans-serif;
            font-weight: 600;
            font-size: 1.125rem; /* 18px */
            line-height: 1.235;
            letter-spacing: 0.00735em;
        }
        @media (min-width: 600px) {
            .typography-h4 {
                font-size: 1.25rem; /* 20px */
            }
        }
        @media (min-width: 900px) {
            .typography-h4 {
                font-size: 2.125rem; /* 34px */
            }
        }
        
        /* h5 - Small headers */
        .typography-h5 {
            font-family: "Inter", sans-serif;
            font-weight: 600;
            font-size: 1rem; /* 16px */
            line-height: 1.334;
            letter-spacing: 0em;
        }
        @media (min-width: 600px) {
            .typography-h5 {
                font-size: 1.125rem; /* 18px */
            }
        }
        @media (min-width: 900px) {
            .typography-h5 {
                font-size: 1.25rem; /* 20px */
            }
        }
        
        /* h6 - Smaller headers */
        .typography-h6 {
            font-family: "Inter", sans-serif;
            font-weight: 500;
            font-size: 0.875rem; /* 14px */
            line-height: 1.6;
            letter-spacing: 0.0075em;
        }
        @media (min-width: 600px) {
            .typography-h6 {
                font-size: 1rem; /* 16px */
            }
        }
        @media (min-width: 900px) {
            .typography-h6 {
                font-size: 1.25rem; /* 20px */
            }
        }
        
        /* body1 - Default body text */
        .typography-body1 {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 1rem; /* 16px */
            line-height: 1.5;
            letter-spacing: 0.00938em;
        }
        
        /* body2 - Secondary body text */
        .typography-body2 {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 0.875rem; /* 14px */
            line-height: 1.43;
            letter-spacing: 0.01071em;
        }
        
        /* subtitle1 - Large subtitles */
        .typography-subtitle1 {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 1rem; /* 16px */
            line-height: 1.75;
            letter-spacing: 0.00938em;
        }
        
        /* subtitle2 - Small subtitles */
        .typography-subtitle2 {
            font-family: "Inter", sans-serif;
            font-weight: 500;
            font-size: 0.875rem; /* 14px */
            line-height: 1.57;
            letter-spacing: 0.00714em;
        }
        
        /* caption - Small text */
        .typography-caption {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 0.75rem; /* 12px */
            line-height: 1.66;
            letter-spacing: 0.03333em;
        }
        
        /* overline - Uppercase labels */
        .typography-overline {
            font-family: "Inter", sans-serif;
            font-weight: 400;
            font-size: 0.75rem; /* 12px */
            line-height: 2.66;
            letter-spacing: 0.08333em;
            text-transform: uppercase;
        }