/* ===== VARIÁVEIS DE TIPOGRAFIA ===== */
:root {
    /* Família de fontes */
    --font-family: 'Inter', sans-serif;
    --font-family-secondary: 'Arial', sans-serif;
    
    /* Tamanhos de fonte */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    
    /* Pesos de fonte */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Altura da linha */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.8;
    
    /* Espaçamento entre letras */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
}

/* ===== CONFIGURAÇÃO BASE DE TIPOGRAFIA ===== */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-dark);
}

/* ===== CLASSES DE TAMANHO DE FONTE ===== */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }

/* ===== CLASSES DE PESO DE FONTE ===== */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* ===== CLASSES DE ALTURA DA LINHA ===== */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* ===== CLASSES DE ESPAÇAMENTO ENTRE LETRAS ===== */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
.tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }

/* ===== CLASSES DE ALINHAMENTO DE TEXTO ===== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ===== CLASSES DE DECORAÇÃO DE TEXTO ===== */
.underline { text-decoration: underline !important; }
.no-underline { text-decoration: none !important; }
.line-through { text-decoration: line-through !important; }

/* ===== CLASSES DE TRANSFORMAÇÃO DE TEXTO ===== */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ===== CLASSES DE ESTILO DE FONTE ===== */
.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }

/* ===== CLASSES DE QUEBRA DE TEXTO ===== */
.break-normal { word-break: normal !important; overflow-wrap: normal !important; }
.break-words { overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }

/* ===== CLASSES DE TRUNCATE ===== */
.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ===== CLASSES DE WHITE SPACE ===== */
.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ===== CLASSES DE WORD BREAK ===== */
.break-words { word-break: break-word !important; }
.break-all { word-break: break-all !important; }

/* ===== CLASSES DE TÍTULOS ===== */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-dark);
}

.h1 { font-size: var(--font-size-5xl); }
.h2 { font-size: var(--font-size-4xl); }
.h3 { font-size: var(--font-size-3xl); }
.h4 { font-size: var(--font-size-2xl); }
.h5 { font-size: var(--font-size-xl); }
.h6 { font-size: var(--font-size-lg); }

/* ===== CLASSES DE PARÁGRAFO ===== */
.p-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-medium);
}

.p-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-medium);
}

.p-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--text-light);
}

/* ===== CLASSES DE DESTAQUE ===== */
.highlight {
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
}

.emphasis {
    font-style: italic;
    color: var(--text-medium);
}

/* ===== CLASSES RESPONSIVAS DE TEXTO ===== */
@media (max-width: 768px) {
    .text-responsive-xs { font-size: var(--font-size-xs) !important; }
    .text-responsive-sm { font-size: var(--font-size-sm) !important; }
    .text-responsive-base { font-size: var(--font-size-base) !important; }
    .text-responsive-lg { font-size: var(--font-size-lg) !important; }
    .text-responsive-xl { font-size: var(--font-size-xl) !important; }
    .text-responsive-2xl { font-size: var(--font-size-2xl) !important; }
    .text-responsive-3xl { font-size: var(--font-size-3xl) !important; }
    .text-responsive-4xl { font-size: var(--font-size-4xl) !important; }
    .text-responsive-5xl { font-size: var(--font-size-5xl) !important; }
    .text-responsive-6xl { font-size: var(--font-size-6xl) !important; }
}

@media (max-width: 480px) {
    .text-mobile-xs { font-size: var(--font-size-xs) !important; }
    .text-mobile-sm { font-size: var(--font-size-sm) !important; }
    .text-mobile-base { font-size: var(--font-size-base) !important; }
    .text-mobile-lg { font-size: var(--font-size-lg) !important; }
    .text-mobile-xl { font-size: var(--font-size-xl) !important; }
    .text-mobile-2xl { font-size: var(--font-size-2xl) !important; }
    .text-mobile-3xl { font-size: var(--font-size-3xl) !important; }
    .text-mobile-4xl { font-size: var(--font-size-4xl) !important; }
    .text-mobile-5xl { font-size: var(--font-size-5xl) !important; }
    .text-mobile-6xl { font-size: var(--font-size-6xl) !important; }
}