/**
 * Arenito Design System — Tipografia
 *
 * Tokens de tipografia para uso nos componentes. Sempre referenciar via var(--arenito-*).
 *
 * Famílias:
 *   display  → Space Grotesk (títulos H1, H2)
 *   body     → Inter (parágrafos, labels, inputs)
 *
 * Escala de texto:
 *   h1  → 32px / 40px / 700 / Space Grotesk
 *   h2  → 20px / 30px / 500 / Space Grotesk
 *   p1  → 16px / 26px / 500 / Inter
 *   p2  → 16px / 26px / 400 / Inter
 *   p3  → 14px / 24px / 500 / Inter
 *   p4  → 14px / 24px / 400 / Inter
 *   p5  → 12px / 22px / 500 / Inter
 *   p6  → 12px / 22px / 400 / Inter
 *
 * Fonte: Figma UI-KIT (node 7907-834)
 */

:root {

    /* =====================================================================
     * Famílias
     * ===================================================================== */

    --arenito-font-family-display: 'Space Grotesk', sans-serif;
    --arenito-font-family-body:    'Inter', sans-serif;

    /* =====================================================================
     * Pesos
     * ===================================================================== */

    --arenito-font-weight-regular:   400;
    --arenito-font-weight-medium:    500;
    --arenito-font-weight-semibold:  600;
    --arenito-font-weight-bold:      700;

    /* =====================================================================
     * H1 — Space Grotesk Bold
     * ===================================================================== */

    --arenito-h1-family:      var(--arenito-font-family-display);
    --arenito-h1-size:        32px;
    --arenito-h1-line-height: 40px;
    --arenito-h1-weight:      var(--arenito-font-weight-bold);

    /* =====================================================================
     * H2 — Space Grotesk Medium
     * ===================================================================== */

    --arenito-h2-family:      var(--arenito-font-family-display);
    --arenito-h2-size:        20px;
    --arenito-h2-line-height: 30px;
    --arenito-h2-weight:      var(--arenito-font-weight-medium);

    /* =====================================================================
     * P1 — Inter Medium 16px
     * ===================================================================== */

    --arenito-p1-family:      var(--arenito-font-family-body);
    --arenito-p1-size:        16px;
    --arenito-p1-line-height: 26px;
    --arenito-p1-weight:      var(--arenito-font-weight-medium);

    /* =====================================================================
     * P2 — Inter Regular 16px
     * ===================================================================== */

    --arenito-p2-family:      var(--arenito-font-family-body);
    --arenito-p2-size:        16px;
    --arenito-p2-line-height: 26px;
    --arenito-p2-weight:      var(--arenito-font-weight-regular);

    /* =====================================================================
     * P3 — Inter Medium 14px
     * ===================================================================== */

    --arenito-p3-family:      var(--arenito-font-family-body);
    --arenito-p3-size:        14px;
    --arenito-p3-line-height: 24px;
    --arenito-p3-weight:      var(--arenito-font-weight-medium);

    /* =====================================================================
     * P4 — Inter Regular 14px
     * ===================================================================== */

    --arenito-p4-family:      var(--arenito-font-family-body);
    --arenito-p4-size:        14px;
    --arenito-p4-line-height: 24px;
    --arenito-p4-weight:      var(--arenito-font-weight-regular);

    /* =====================================================================
     * P5 — Inter Medium 12px
     * ===================================================================== */

    --arenito-p5-family:      var(--arenito-font-family-body);
    --arenito-p5-size:        12px;
    --arenito-p5-line-height: 22px;
    --arenito-p5-weight:      var(--arenito-font-weight-medium);

    /* =====================================================================
     * P6 — Inter Regular 12px
     * ===================================================================== */

    --arenito-p6-family:      var(--arenito-font-family-body);
    --arenito-p6-size:        12px;
    --arenito-p6-line-height: 22px;
    --arenito-p6-weight:      var(--arenito-font-weight-regular);
}