@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/Montserrat-VariableFont_wght.ttf");
}

/* Target specific elements instead of universal selector */
body, p, span, div, input, textarea, button, a, li, td, th, label {
    font-family: "Montserrat" !important;
    font-weight: 500;
    font-size: 18px;
    color: #21272c;
}

/* Preserve specific font elements */
pre, code, .monospace {
    font-family: monospace !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: serif !important;
}

/* Responsive Breakpoints System */
/* Small mobile: 480px and below */
@media screen and (max-width: 480px) {
    body, p, span, div, input, textarea, button, a, li, td, th, label {
        font-size: 14px;
    }
}

/* Large mobile: 481px to 640px */
@media screen and (min-width: 481px) and (max-width: 640px) {
    body, p, span, div, input, textarea, button, a, li, td, th, label {
        font-size: 15px;
    }
}

/* Tablet: 641px to 768px */
@media screen and (min-width: 641px) and (max-width: 768px) {
    body, p, span, div, input, textarea, button, a, li, td, th, label {
        font-size: 16px;
    }
}

/* Small desktop: 769px to 991px */
@media screen and (min-width: 769px) and (max-width: 991px) {
    body, p, span, div, input, textarea, button, a, li, td, th, label {
        font-size: 17px;
    }
}

/* Legacy breakpoint for existing styles */
@media screen and (max-width: 991px) {
    body, p, span, div, input, textarea, button, a, li, td, th, label {
        font-size: 15px;
    }
    
    /* Ensure minimum touch targets for mobile */
    button,
    .btn,
    .nav-link,
    input[type="submit"],
    input[type="button"],
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile-specific interaction states */
    button:active,
    .btn:active,
    .nav-link:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    a[role="button"]:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.1s ease;
    }
    
    /* Enhanced focus states for mobile */
    .input-field:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #425a76;
        outline-offset: 2px;
        border-color: #425a76;
        box-shadow: 0 0 0 3px rgba(66, 90, 118, 0.1);
    }
    
    /* Allow components to override if needed */
    .custom-input:focus {
        outline: revert;
        border-color: revert;
        box-shadow: revert;
    }
    
    /* Mobile-friendly hover alternatives (touch feedback) */
    @media (hover: none) and (pointer: coarse) {
        button:hover,
        .btn:hover,
        .nav-link:hover {
            transform: none;
            background-color: inherit;
        }
        
        button:active,
        .btn:active,
        .nav-link:active {
            opacity: 0.8;
            transform: scale(0.98);
        }
    }
}