/* Roboto Font - Self-hosted for performance */

/* Roboto Light (300) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2');
}

/* Roboto Regular (400) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

/* Roboto Medium (500) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* Roboto Bold (700) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2');
}

/* ===== Responsive Font Scaling ===== */

/* Base font size with viewport scaling for better mobile readability */
html {
    /* Mobile-first base: 16px on small screens, scales up to 18px on larger screens */
    font-size: clamp(14px, 2.5vw, 18px);
}

/* Responsive typography adjustments */
@media (max-width: 600px) {
    html {
        font-size: 14px; /* Slightly smaller base for mobile to fit more content */
    }

    /* Ensure headings are readable but not too large on mobile */
    h1, .mud-typography-h1 {
        font-size: 1.75rem !important; /* 28px on mobile */
    }

    h2, .mud-typography-h2 {
        font-size: 1.5rem !important; /* 24px on mobile */
    }

    h3, .mud-typography-h3 {
        font-size: 1.25rem !important; /* 20px on mobile */
    }

    h4, .mud-typography-h4 {
        font-size: 1.125rem !important; /* 18px on mobile */
    }

    h5, .mud-typography-h5 {
        font-size: 1rem !important; /* 16px on mobile */
    }

    h6, .mud-typography-h6 {
        font-size: 0.875rem !important; /* 14px on mobile */
    }

    /* Body text optimized for mobile reading */
    body, .mud-typography-body1 {
        font-size: 0.875rem; /* 14px */
        line-height: 1.6;
    }

    .mud-typography-body2 {
        font-size: 0.8125rem; /* 13px */
        line-height: 1.5;
    }

    /* Smaller captions and helper text */
    .mud-typography-caption {
        font-size: 0.75rem !important; /* 12px */
    }
}

/* Tablet optimization */
@media (min-width: 601px) and (max-width: 959px) {
    html {
        font-size: 15px;
    }

    h1, .mud-typography-h1 {
        font-size: 2rem !important;
    }

    h2, .mud-typography-h2 {
        font-size: 1.75rem !important;
    }

    h3, .mud-typography-h3 {
        font-size: 1.5rem !important;
    }
}

/* Desktop - standard sizing */
@media (min-width: 960px) {
    html {
        font-size: 16px;
    }
}

/* Large desktop - slightly larger for readability */
@media (min-width: 1440px) {
    html {
        font-size: 17px;
    }
}

/* Accessibility: Respect user's font size preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Ensure text remains readable at all zoom levels */
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}