// ═══════════════════════════════════════════════
// FERMENTY MOBILE — Base & Typography
// ═══════════════════════════════════════════════

// (Las fuentes las carga el <head> del layout — Comfortaa/Raleway/JetBrains
//  Mono. El @import de Google Fonts que vivía aquí duplicaba la petición y
//  traía Inter, del esquema antiguo.)

// ── Reset ────────────────────────────────────
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

// Sin esto, Safari/Chrome en móvil pueden auto-agrandar el texto en columnas
// estrechas (p.ej. las etiquetas de 10px del menú inferior), desbordando y
// partiendo en dos líneas lo que en el diseño es de una sola.
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

// ── Root ─────────────────────────────────────
:root {
    --font-brand: #{$font-brand};
    --font-ui:    #{$font-ui};
    --page-bg:    #{$g-page};
    --topbar-h:   #{$topbar-height};
    --bottomnav-h: #{$bottomnav-height};
}

// ── Body ─────────────────────────────────────
body {
    font-family: $font-ui;
    font-size: $fs-md;
    line-height: 1.5;
    color: $t-dark;
    background: $g-page;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

// ── Typography scale ─────────────────────────

// All headings use Comfortaa
h1, h2, h3, h4, h5, h6 {
    font-family: $font-brand;
    font-weight: $fw-medium;
    color: $t-dark;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 { font-size: $fs-2xl; }
h2 { font-size: $fs-xl; }
h3 { font-size: $fs-lg; }
h4 { font-size: $fs-md; }

// Named classes for semantic use
.title-brand {
    font-family: $font-brand;
    font-weight: $fw-medium;
}

.title-page {
    font-family: $font-brand;
    font-size: $fs-xl;
    font-weight: $fw-medium;
    color: $t-dark;
}