/* Typography & Responsive Design - Roboto Font Implementation */
/* This file contains optimized typography and button sizing for all devices */

/* ==========================================================================
   GOOGLE FONTS IMPORT
   ========================================================================== */
/* Google Fonts Roboto is loaded via preload in HTML header for better performance */

/* ==========================================================================
   BASE TYPOGRAPHY RESET
   ========================================================================== */

/* Override existing font-family */
body,
html,
* {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ==========================================================================
   RESPONSIVE FONT SIZES
   ========================================================================== */

/* Base font sizes for different screen sizes */
html {
    font-size: 12px; /* Base font size */
}

/* Mobile devices (320px - 767px) */
@media (max-width: 767.98px) {
    html {
        font-size: 12px;
    }
    
    body {
        font-size: 1rem; /* 12px */
        line-height: 1.5;
    }
    
    h1 { font-size: 1.75rem; font-weight: 700; } /* 24.5px */
    h2 { font-size: 1.5rem; font-weight: 600; }  /* 21px */
    h3 { font-size: 1.25rem; font-weight: 600; } /* 17.5px */
    h4 { font-size: 1.125rem; font-weight: 500; } /* 15.75px */
    h5 { font-size: 1rem; font-weight: 500; }    /* 14px */
    h6 { font-size: 0.875rem; font-weight: 500; } /* 12.25px */
    
    p, .text-base { font-size: 1rem; line-height: 1.5; } /* 14px */
    .text-sm { font-size: 0.875rem; } /* 12.25px */
    .text-xs { font-size: 0.75rem; }  /* 10.5px */
    .text-lg { font-size: 1.125rem; } /* 15.75px */
    .text-xl { font-size: 1.25rem; }  /* 17.5px */
}

/* Tablet devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 12px;
    }
    
    body {
        font-size: 1rem; /* 12px */
        line-height: 1.6;
    }
    
    h1 { font-size: 2rem; font-weight: 700; }    /* 30px */
    h2 { font-size: 1.75rem; font-weight: 600; } /* 26.25px */
    h3 { font-size: 1.5rem; font-weight: 600; }  /* 22.5px */
    h4 { font-size: 1.25rem; font-weight: 500; } /* 18.75px */
    h5 { font-size: 1.125rem; font-weight: 500; } /* 16.875px */
    h6 { font-size: 1rem; font-weight: 500; }    /* 15px */
    
    p, .text-base { font-size: 1rem; line-height: 1.6; } /* 15px */
    .text-sm { font-size: 0.875rem; } /* 13.125px */
    .text-xs { font-size: 0.75rem; }  /* 11.25px */
    .text-lg { font-size: 1.125rem; } /* 16.875px */
    .text-xl { font-size: 1.375rem; } /* 20.625px */
}

/* Desktop devices (992px and up) */
@media (min-width: 992px) {
    html {
        font-size: 12px;
    }
    
    body {
        font-size: 12px;
        line-height: 1.6;
    }
    
    h1 { font-size: 2.25rem; font-weight: 700; } /* 36px */
    h2 { font-size: 2rem; font-weight: 600; }    /* 32px */
    h3 { font-size: 1.75rem; font-weight: 600; } /* 28px */
    h4 { font-size: 1.5rem; font-weight: 500; }  /* 24px */
    h5 { font-size: 1.25rem; font-weight: 500; } /* 20px */
    h6 { font-size: 1.125rem; font-weight: 500; } /* 18px */
    
    p, .text-base { font-size: 1rem; line-height: 1.6; } /* 16px */
    .text-sm { font-size: 0.875rem; } /* 14px */
    .text-xs { font-size: 0.75rem; }  /* 12px */
    .text-lg { font-size: 1.125rem; } /* 18px */
    .text-xl { font-size: 1.25rem; }  /* 20px */
    .text-2xl { font-size: 1.5rem; }  /* 24px */
}

/* Large desktop devices (1200px and up) */
@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }  /* 40px */
    h2 { font-size: 2.25rem; } /* 36px */
    .text-2xl { font-size: 1.75rem; } /* 28px */
    .text-3xl { font-size: 2rem; }    /* 32px */
}

/* ==========================================================================
   RESPONSIVE BUTTON STYLES
   ========================================================================== */

/* Base button styles */
.btn {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.025em;
}

/* Mobile button sizes */
@media (max-width: 767.98px) {
    .btn {
        font-size: 0.875rem; /* 12.25px */
        padding: 0.5rem 1rem;
        min-height: 2.5rem;
    }
    
    .btn-sm {
        font-size: 0.75rem; /* 10.5px */
        padding: 0.375rem 0.75rem;
        min-height: 2rem;
    }
    
    .btn-lg {
        font-size: 1rem; /* 14px */
        padding: 0.75rem 1.5rem;
        min-height: 3rem;
    }
    
    /* Mobile-specific button adjustments */
    .btn-add-to-cart,
    .btn-primary {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
        min-height: 2.75rem;
    }
}

/* Tablet button sizes */
@media (min-width: 768px) and (max-width: 991.98px) {
    .btn {
        font-size: 0.9375rem; /* 14.0625px */
        padding: 0.625rem 1.25rem;
        min-height: 2.75rem;
    }
    
    .btn-sm {
        font-size: 0.8125rem; /* 12.1875px */
        padding: 0.5rem 1rem;
        min-height: 2.25rem;
    }
    
    .btn-lg {
        font-size: 1.125rem; /* 16.875px */
        padding: 0.875rem 1.75rem;
        min-height: 3.25rem;
    }
}

/* Desktop button sizes */
@media (min-width: 992px) {
    .btn {
        font-size: 1rem; /* 16px */
        padding: 0.75rem 1.5rem;
        min-height: 3rem;
    }
    
    .btn-sm {
        font-size: 0.875rem; /* 14px */
        padding: 0.5rem 1rem;
        min-height: 2.5rem;
    }
    
    .btn-lg {
        font-size: 1.125rem; /* 18px */
        padding: 1rem 2rem;
        min-height: 3.5rem;
    }
    
    /* Desktop-specific button adjustments */
    .btn-add-to-cart,
    .btn-primary {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        min-height: 3rem;
    }
}

/* ==========================================================================
   FORM ELEMENTS RESPONSIVE SIZING
   ========================================================================== */

/* Input fields */
.form-control,
.form-select {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}

/* Mobile form elements */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 1rem; /* 12px */
        padding: 0.625rem 0.75rem;
        min-height: 2.5rem;
    }
    
    .form-control-sm {
        font-size: 0.875rem; /* 12.25px */
        padding: 0.5rem 0.625rem;
        min-height: 2rem;
    }
    
    .form-control-lg {
        font-size: 1.125rem; /* 15.75px */
        padding: 0.75rem 1rem;
        min-height: 3rem;
    }
}

/* Tablet form elements */
@media (min-width: 768px) and (max-width: 991.98px) {
    .form-control,
    .form-select {
        font-size: 1rem; /* 12px */
        padding: 0.75rem 1rem;
        min-height: 2.75rem;
    }
}

/* Desktop form elements */
@media (min-width: 992px) {
    .form-control,
    .form-select {
        font-size: 12px;
        padding: 0.75rem 1rem;
        min-height: 2rem;
    }
}

/* ==========================================================================
   NAVIGATION & MENU RESPONSIVE SIZING
   ========================================================================== */

/* Navigation links */
.navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500;
}

/* Mobile navigation */
@media (max-width: 767.98px) {
    .navbar-nav .nav-link {
        font-size: 1rem; /* 14px */
        padding: 0.75rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.25rem; /* 17.5px */
    }
}

/* Tablet navigation */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav .nav-link {
        font-size: 1rem; /* 15px */
        padding: 0.75rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.375rem; /* 20.625px */
    }
}

/* Desktop navigation */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        font-size: 14px;
        
    }
    
    .navbar-brand {
        font-size: 1.5rem; /* 24px */
    }
}

/* ==========================================================================
   CARD & CONTENT RESPONSIVE SIZING
   ========================================================================== */

/* Product cards */
.product-card .card-title {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600;
}

.product-card .card-text {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}

/* Mobile cards */
@media (max-width: 767.98px) {
    .product-card .card-title {
        font-size: 1rem; /* 14px */
        line-height: 1.4;
    }
    
    .product-card .card-text {
        font-size: 0.875rem; /* 12.25px */
        line-height: 1.5;
    }
    
    .product-card .price {
        font-size: 1.125rem; /* 15.75px */
        font-weight: 700;
    }
}

/* Tablet cards */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-card .card-title {
        font-size: 1.125rem; /* 16.875px */
        line-height: 1.4;
    }
    
    .product-card .card-text {
        font-size: 1rem; /* 15px */
        line-height: 1.5;
    }
    
    .product-card .price {
        font-size: 1.25rem; /* 18.75px */
        font-weight: 700;
    }
}

/* Desktop cards */
@media (min-width: 992px) {
    .product-card .card-title {
        font-size: 1.125rem; /* 18px */
        line-height: 1.4;
    }
    
    .product-card .card-text {
        font-size: 1rem; /* 16px */
        line-height: 1.5;
    }
    
    .product-card .price {
        font-size: 1.375rem; /* 22px */
        font-weight: 700;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Font weight utilities */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-black { font-weight: 900 !important; }

/* Line height utilities */
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 1.75 !important; }

/* Letter spacing utilities */
.ls-tight { letter-spacing: -0.025em !important; }
.ls-normal { letter-spacing: 0 !important; }
.ls-wide { letter-spacing: 0.025em !important; }
.ls-wider { letter-spacing: 0.05em !important; }

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Ensure minimum touch target sizes on mobile */
@media (max-width: 767.98px) {
    .btn,
    .form-control,
    .form-select,
    a[role="button"],
    button {
        
    }
}

/* Focus states */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }
    
    .form-control,
    .form-select {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select {
        transition: none;
    }
}