// ═══════════════════════════════════════════════
// FERMENTY — Typography
// ═══════════════════════════════════════════════

@use 'variables';
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

// CSS custom properties — fuente única de verdad para el HTML
// Las variables SCSS ($font-size-*) son para uso en SCSS únicamente
// Usar variables desde el namespace 'variables' por @use
:root {
    --font-brand: #{variables.$font-brand};
    --font-ui:    #{variables.$font-ui};
    --font-mono:  #{variables.$font-data};

    // Escala tipográfica sincronizada con $font-size-* de _variables.scss
    --text-xs:   #{variables.$font-size-xs};
    --text-sm:   #{variables.$font-size-sm};
    --text-base: #{variables.$font-size-base};
    --text-md:   #{variables.$font-size-md};
    --text-lg:   #{variables.$font-size-lg};
    --text-xl:   #{variables.$font-size-xl};
    --text-2xl:  #{variables.$font-size-2xl};

    --line-tight:   1.2;
    --line-normal:  1.45;
    --line-relaxed: 1.65;
}

// ── Base ─────────────────────────────────────
body {
    font-family: var(--font-ui);
    font-size: var(--text-md);     // 14px base — más legible en móvil
    line-height: var(--line-normal);
    color: variables.$text-dark;
    background-color: variables.$green-page;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

// ── Headings ─────────────────────────────────
h1, h2, h3, h4, h5, h6 {
    font-family: $font-brand;
    font-weight: $font-weight-medium;  // 500 — corrección del 600 anterior
    color: $text-dark;
    letter-spacing: -0.01em;
    line-height: var(--line-tight);
    margin-bottom: $spacing-sm;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

// Clases de título — fuente brand para títulos de página/sección
.page-title,
.section-title,
.hero-title,
.auth-title,
.card-title,
.batch-card-name,
.catalogue-section-title,
.admin-page-title,
.newsletter-page-title {
    font-family: $font-brand;
    font-weight: $font-weight-medium;
    line-height: var(--line-tight);
}

.page-title {
    font-size: var(--text-2xl);
    color: $text-dark;
    margin-bottom: $spacing-xs;
}

.page-subtitle {
    font-size: var(--text-md);
    color: $text-muted;
    margin-bottom: $spacing-xl;
    line-height: var(--line-relaxed);
}

// ── Elementos UI — siempre Inter ─────────────
p, li, label, input, select, textarea,
button, .form-control, .form-select, .form-label {
    font-family: $font-ui;
}

p, li, .page-subtitle, .hero-subtitle {
    line-height: var(--line-relaxed);
}

// ── Numéricos — alineación tabular ───────────
.numeric,
.batch-card-day,
.stat-value,
.admin-stat-value,
.notif-time,
.fermenty-stat .stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

// ── Helpers de texto ─────────────────────────
.text-muted      { color: $text-muted !important; }
.text-hint       { color: $text-hint !important; }
.text-green      { color: $green-mid !important; }
.text-orange     { color: $orange-main !important; }
.text-dark-green { color: $text-dark !important; }
.fw-brand        { font-family: $font-brand !important; }

// ── Responsive ───────────────────────────────
@media (max-width: 576px) {
    body {
        font-size: var(--text-md);  // 14px — no bajar en móvil
        line-height: var(--line-relaxed);
    }

    h1, .page-title {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    h2, .section-title {
        font-size: clamp(1.05rem, 4vw, 1.2rem);
    }

    // iOS: evita zoom automático en inputs
    input, select, textarea,
    .form-control, .form-select {
        font-size: 16px !important;
    }
}