/* =============================================
   TYPOGRAPHY SYSTEM - JJ System
   Google Fonts: Poppins (headings) + Inter (body)
   ============================================= */

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.6;
    color: var(--gray-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADINGS HIERARCHY (Responsivo com clamp) ===== */
h1,
.h1 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    font-size: clamp(2rem, 5vw, 3rem);
    /* 32px - 48px */
}

h2,
.h2 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: 1.3;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    /* 24px - 36px */
}

h3,
.h3 {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    color: var(--gray-800);
    margin-bottom: var(--spacing-md);
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    /* 20px - 30px */
}

h4,
.h4 {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    color: var(--gray-800);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    /* 18px - 24px */
}

h5,
.h5 {
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    line-height: 1.5;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 2vw, 1.25rem);
    /* 16px - 20px */
}

h6,
.h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    line-height: 1.5;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    /* 14px - 16px */
}

/* ===== PARAGRAPHS ===== */
p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

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

/* Text Sizes */
.text-xs {
    font-size: var(--text-xs) !important;
}

.text-sm {
    font-size: var(--text-sm) !important;
}

.text-base {
    font-size: var(--text-base) !important;
}

.text-lg {
    font-size: var(--text-lg) !important;
}

.text-xl {
    font-size: var(--text-xl) !important;
}

.text-2xl {
    font-size: var(--text-2xl) !important;
}

.text-3xl {
    font-size: var(--text-3xl) !important;
}

/* Font Weights */
.fw-normal {
    font-weight: var(--font-normal) !important;
}

.fw-medium {
    font-weight: var(--font-medium) !important;
}

.fw-semibold {
    font-weight: var(--font-semibold) !important;
}

.fw-bold {
    font-weight: var(--font-bold) !important;
}

.fw-extrabold {
    font-weight: var(--font-extrabold) !important;
}

/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-muted {
    color: var(--gray-500) !important;
}

.text-dark {
    color: var(--gray-900) !important;
}

.text-white {
    color: #ffffff !important;
}

/* Special Typography */
.text-lead {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: 1.8;
    color: var(--gray-600);
}

.text-small {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.text-tiny {
    font-size: var(--text-xs);
    line-height: 1.4;
}

.text-mono {
    font-family: var(--font-mono) !important;
}

/* Text Alignment (Mobile-First) */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

@media (min-width: 768px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-center {
        text-align: center !important;
    }

    .text-md-right {
        text-align: right !important;
    }
}

/* Line Height */
.lh-tight {
    line-height: 1.2 !important;
}

.lh-normal {
    line-height: 1.5 !important;
}

.lh-relaxed {
    line-height: 1.8 !important;
}

/* Text Transform */
.text-uppercase {
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

/* Text Decoration */
.text-underline {
    text-decoration: underline !important;
}

.text-no-underline {
    text-decoration: none !important;
}

/* Truncate */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* ===== LINKS ===== */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* ===== LISTS ===== */
ul,
ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
}

/* ===== CODE ===== */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background-color: var(--gray-100);
    color: var(--danger);
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--spacing-md);
    background-color: var(--gray-900);
    color: var(--gray-100);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* ===== BLOCKQUOTE ===== */
blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--gray-600);
}

/* ===== HR ===== */
hr {
    border: 0;
    height: 1px;
    background-color: var(--gray-200);
    margin: var(--spacing-xl) 0;
}