/* Global Responsive Typography System */
/* This file standardizes font sizes across all pages for better mobile experience */

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

/* Headings */
h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

h6 {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Body text */
p, .text-base {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Small text */
.text-sm {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Extra small text */
.text-xs {
    font-size: 0.625rem;
    line-height: 1.3;
}

/* Large text */
.text-lg {
    font-size: 1rem;
    line-height: 1.5;
}

/* Extra large text */
.text-xl {
    font-size: 1.125rem;
    line-height: 1.4;
}

/* 2XL text */
.text-2xl {
    font-size: 1.25rem;
    line-height: 1.3;
}

/* 3XL text */
.text-3xl {
    font-size: 1.5rem;
    line-height: 1.2;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet and up (md: 768px+) */
@media (min-width: 768px) {
    h1 {
        font-size: 1.875rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.875rem;
    }

    p, .text-base {
        font-size: 1rem;
    }

    .text-sm {
        font-size: 0.875rem;
    }

    .text-xs {
        font-size: 0.75rem;
    }

    .text-lg {
        font-size: 1.125rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    .text-2xl {
        font-size: 1.5rem;
    }

    .text-3xl {
        font-size: 1.875rem;
    }
}

/* Desktop and up (lg: 1024px+) */
@media (min-width: 1024px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .text-2xl {
        font-size: 1.75rem;
    }

    .text-3xl {
        font-size: 2.25rem;
    }
}

/* Large desktop and up (xl: 1280px+) */
@media (min-width: 1280px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .text-3xl {
        font-size: 2.5rem;
    }
}

/* ===== COMPONENT-SPECIFIC TYPOGRAPHY ===== */

/* Card titles */
.card-title {
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1rem !important;
    }
}

/* Button text */
.btn {
    font-size: 0.875rem;
    font-weight: 500;
}

.btn-sm {
    font-size: 0.75rem;
}

.btn-lg {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .btn {
        font-size: 1rem;
    }

    .btn-sm {
        font-size: 0.875rem;
    }

    .btn-lg {
        font-size: 1.125rem;
    }
}

/* Navigation */
.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .nav-link {
        font-size: 1rem;
    }
}

/* Form labels */
label, .label-text {
    font-size: 0.875rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    label, .label-text {
        font-size: 1rem;
    }
}

/* Form inputs */
input, select, textarea {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    input, select, textarea {
        font-size: 1rem;
    }
}

/* Table text */
table {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    table {
        font-size: 1rem;
    }
}

/* ===== SHOP-SPECIFIC COMPONENTS ===== */

/* Product cards */
.product-card .card-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.product-card .price {
    font-size: 1rem;
    font-weight: 700;
}

.product-card .old-price {
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .product-card .card-title {
        font-size: 1rem;
    }

    .product-card .price {
        font-size: 1.125rem;
    }

    .product-card .old-price {
        font-size: 0.875rem;
    }
}

/* Category links */
.category-link {
    font-size: 0.75rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .category-link {
        font-size: 0.875rem;
    }
}

/* Hero section */
.hero-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
}

.hero-description {
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    line-height: 1.5;
}

.hero-cta {
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .hero-cta {
        font-size: 1rem;
    }
}

/* ===== ADMIN-SPECIFIC COMPONENTS ===== */

/* Admin dashboard */
.admin-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.admin-subtitle {
    font-size: 1rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .admin-title {
        font-size: 1.5rem;
    }

    .admin-subtitle {
        font-size: 1.125rem;
    }
}

/* Admin tables */
.admin-table th {
    font-size: 0.875rem;
    font-weight: 600;
}

.admin-table td {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .admin-table th {
        font-size: 1rem;
    }

    .admin-table td {
        font-size: 1rem;
    }
}

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

/* Text truncation */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Font weights */
.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

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

/* Ensure minimum readable font size */
@media (max-width: 767px) {
    body {
        font-size: 16px; /* Minimum readable size */
    }

    /* Prevent text from becoming too small */
    .text-xs {
        font-size: 0.75rem; /* Minimum 12px */
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: bold;
    }
}