/* ALLCARSCURACAO TYPOGRAPHY SYSTEM */
/* Comprehensive typography system for consistent design across all pages */

/* INTER FONT WEIGHT HIERARCHY FOR CUSTOMER PAGES:
 * 400 (Regular) - Body text, paragraphs, regular content
 * 500 (Medium) - Labels, navigation links, medium emphasis
 * 600 (SemiBold) - Buttons, form labels, moderate headings
 * 700 (Bold) - Main headings, section titles, strong emphasis
 * 800+ (ExtraBold/Black) - Hero titles, major headings only
 */

/* Set default font on body - all elements inherit naturally */
body {
    font-family: var(--font-primary);
}

/* Only override font-family for specific elements that need different fonts */

/* CONSISTENT TYPOGRAPHY HIERARCHY */

/* 1. HERO TITLE - 48px/56px desktop, 32px/40px mobile */
h1, .hero-title {
    font-size: 2rem; /* 32px */
    line-height: 2.5rem; /* 40px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: inherit;
}
@media (min-width: 768px) {
    h1, .hero-title {
        font-size: 3rem; /* 48px */
        line-height: 3.5rem; /* 56px */
    }
}

/* 2. SECTION HEADINGS - 28px/32px */
h2, .section-title,
.text-2xl, .text-3xl {
    font-size: 1.75rem; /* 28px */
    line-height: 2rem; /* 32px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: inherit;
}

/* 3. SUBSECTION HEADINGS - 18px/24px */
h3, .text-xl {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5rem; /* 24px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: inherit;
}

/* 4. CARD TITLES & SMALL HEADINGS - 21px/27px */
h4, h5, .font-bold {
    font-size: 1.3rem; /* 21px */
    line-height: 1.7rem; /* 27px */
    font-weight: 700;
    color: inherit;
}

/* 5. MICRO HEADINGS & LABELS - 14px/20px */
h6, label, .font-semibold, .font-medium {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 500;
    font-family: var(--font-primary); /* Inter for labels */
    color: inherit;
}

/* 6. BODY TEXT SIZES */

/* Large Body Text - 16px/24px */
.text-lg, p {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    font-weight: 400;
    color: inherit;
}

/* Regular Body Text - 14px/20px */
.text-base, .text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 400;
    color: inherit;
}

/* Small Text - 12px/16px */
.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    font-weight: 400;
    color: inherit;
}

/* 7. UI ELEMENTS */

/* Navigation Links */
nav a, nav span {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 500;
}

/* Buttons */
button, .btn, input[type="submit"] {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 600;
}

/* Form Elements */
input, select, textarea {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 400;
    font-family: var(--font-primary) !important; /* Inter for ALL input text */
}

/* Tab Buttons */
.tab-button {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    font-weight: 500;
    color: #1e293b; /* Dark text for all tab states */
}

/* Tab Button Active State */
.tab-button.active {
    color: #1e293b; /* Dark text on yellow/white background */
}

/* 8. CONSISTENT COLORS */

/* Primary Text Colors */
.text-slate-900, .text-gray-900 {
    color: #0f172a !important;
}

.text-slate-800, .text-gray-800 {
    color: #1e293b !important;
}

.text-slate-600, .text-gray-600 {
    color: #475569 !important;
}

.text-slate-500, .text-gray-500 {
    color: #64748b !important;
}

.text-slate-400, .text-gray-400 {
    color: #94a3b8 !important;
}

.text-slate-200 {
    color: #e2e8f0 !important;
}

/* Link Colors */
.text-sky-600, .text-blue-600 {
    color: #0284c7 !important;
}

.text-sky-700, .text-blue-700 {
    color: #0369a1 !important;
}

/* 9. SPECIFIC OVERRIDES FOR PROBLEM AREAS */

/* Footer Headings */
footer h3 {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
}

/* FAQ and Details Summaries */
summary {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
}

/* Promotional Card Titles */
.bg-gradient-to-br h3 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
}

/* Modal Headings */
.prose h3 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
}

/* KPI Indicators */
.kpi-label {
    font-size: 0.625rem !important; /* 10px */
    line-height: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
}
.kpi-value {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1rem !important; /* 16px */
    font-weight: 700 !important;
}

/* Search form specific overrides */
#classic-search label {
    color: #111827 !important;
    font-weight: 500 !important;
    font-family: var(--font-primary) !important; /* Inter for labels */
}
#classic-search input[type="text"],
#classic-search input[type="date"],
#classic-search input[type="time"] {
    color: #111827 !important;
}

/* CUSTOMER PAGES SPECIFIC - Inter for all text elements */
body.browse-page,
body.customer-page,
body.public-page {
    /* Set Inter as base font - all elements inherit this */
    font-family: var(--font-primary);
}

/* Ensure all elements on customer pages use Inter consistently */
body.browse-page *,
body.customer-page *,
body.public-page * {
    font-family: var(--font-primary);
}