/**
 * TIPOGRAFIA - PharmData Design System v2.0
 * Stack: EB Garamond (Display) + IBM Plex Sans (UI) + IBM Plex Mono (Code)
 *
 * FILOSOFIA:
 * Elegância clássica (Garamond) + Precisão técnica (IBM Plex)
 * Coesão visual entre logo (Garamond) e interface
 * Hierarquia clara através de mistura intencional de fontes
 * Legibilidade superior para dados farmacêuticos densos
 */

/* ============================================
   1. FONT IMPORTS (Google Fonts)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap&subset=latin');

/* ============================================
   2. ROOT VARIABLES
   ============================================ */

:root {
    /* FONT FAMILIES */
    --font-display: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* FONT SIZES */
    --text-xs: 0.75rem;      /* 12px - Caption */
    --text-sm: 0.875rem;     /* 14px - Label, Code */
    --text-base: 1rem;       /* 16px - Body */
    --text-md: 1.125rem;     /* 18px - H3 */
    --text-lg: 1.25rem;      /* 20px - Não usado */
    --text-xl: 1.5rem;       /* 24px - H2 */
    --text-2xl: 2rem;        /* 32px - H1 */

    /* FONT WEIGHTS */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* LINE HEIGHTS */
    --leading-tight: 1.2;     /* H1 - Compacto */
    --leading-snug: 1.3;      /* H2 - Apertado */
    --leading-normal: 1.4;    /* H3, Labels - Normal */
    --leading-relaxed: 1.5;   /* Caption, Code - Relaxado */
    --leading-loose: 1.6;     /* Body - Solto para leitura confortável */

    /* LETTER SPACING */
    --tracking-tighter: -0.01em;   /* H1 - Aperto elegante */
    --tracking-tight: -0.005em;    /* H2 - Sutil */
    --tracking-normal: 0;          /* Default */
    --tracking-wide: 0.01em;       /* Labels - Clarity */
    --tracking-wider: 0.015em;     /* Caption - Legibilidade em tamanho pequeno */
}

/* ============================================
   3. FONT SMOOTHING & RENDERING
   ============================================ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   4. HEADING STYLES
   ============================================ */

.text-h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 1rem;
}

.text-h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 0.75rem;
}

.text-h3 {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.5rem;
}

.text-h4 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.375rem;
}

.text-h5 {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
    margin-bottom: 0.25rem;
}

.text-h6 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
    margin-bottom: 0.25rem;
}

/* ============================================
   4.1 CAPTION & OVERLINE STYLES
   ============================================ */

.text-caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--soft-steel, #374151);
}

.text-overline {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft-steel, #374151);
}

.text-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--soft-steel, #374151);
}

.text-subtitle-lg {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--soft-steel, #374151);
}

/* ============================================
   4.2 DISPLAY STYLES (Hero text)
   ============================================ */

.text-display-lg {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--emerald-abyss, #0B2D2A);
}

.text-display {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--emerald-abyss, #0B2D2A);
}

.text-display-sm {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--emerald-abyss, #0B2D2A);
}

/* Fallback para elementos semânticos */
h1 { @apply text-h1; }
h2 { @apply text-h2; }
h3 { @apply text-h3; }
h4 { @apply text-h4; }
h5 { @apply text-h5; }
h6 { @apply text-h6; }

/* ============================================
   5. BODY TEXT STYLES
   ============================================ */

.text-body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-loose);
    letter-spacing: var(--tracking-normal);
    color: var(--graphite-depth, #1F2937);
}

.text-body-medium {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-loose);
    color: var(--graphite-depth, #1F2937);
}

p { @apply text-body; }

/* ============================================
   6. UI TEXT STYLES
   ============================================ */

.text-label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--graphite-depth, #1F2937);
}

.text-caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-wider);
    color: var(--soft-steel, #374151);
}

/* ============================================
   7. TECHNICAL TEXT STYLES
   ============================================ */

.text-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    background: var(--arctic-mist, #E9ECEF);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--graphite-depth, #1F2937);
}

code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ============================================
   8. UTILITY CLASSES
   ============================================ */

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

/* ============================================
   9. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
    /* Mobile: Reduz tamanhos para economizar espaço */

    .text-h1 {
        font-size: 1.75rem; /* 28px */
        margin-bottom: 0.75rem;
    }

    .text-h2 {
        font-size: 1.25rem; /* 20px */
        margin-bottom: 0.5rem;
    }

    .text-h3 {
        font-size: 1rem; /* 16px */
    }

    .text-body {
        font-size: 0.875rem; /* 14px */
        line-height: var(--leading-normal);
    }
}

@media (min-width: 1280px) {
    /* Desktop large: Mais espaço respirável */

    .text-h1 {
        margin-bottom: 1.25rem;
    }

    .text-h2 {
        margin-bottom: 1rem;
    }
}

/* ============================================
   10. ACCESSIBILITY
   ============================================ */

/* Garantir contraste mínimo WCAG AA */
@media (prefers-contrast: high) {
    .text-caption {
        color: var(--graphite-depth, #1F2937);
    }
}

/* Respeitar preferências de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ============================================
   11. DARK MODE PREPARADO (FUTURO)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Placeholder para futuro dark mode */
    /* Implementação será adicionada quando necessário */
}