/* ==========================================================================
   LIVIGO
   GLOBAL TYPOGRAPHY SYSTEM

   Path:
   /assets/css/global-typography.css

   Purpose:
   - One shared typography standard for the entire Livigo platform.
   - Public website.
   - Minha Livigo.
   - Customer App / PWA.
   - Livigo Pro.
   - Livigo Mudanças Pro.
   - Livigo Imóveis Pro.
   - Livigo Serviços Pro.
   - Account and authenticated workspaces.

   Architecture:
   - Typography values come from /assets/css/variables.css.
   - This file consumes those tokens.
   - This file must not redefine the global typography scale.
   - Module styles may create hierarchy, but should use these tokens.

   Readability Standard:
   - Normal readable content: 1rem / 16px.
   - Compact interface text: 0.875rem / 14px.
   - Metadata / supporting UI: 0.75rem / 12px minimum.
   - Form inputs remain 1rem / 16px.
   - Mobile layouts must adapt instead of shrinking essential text.
   - Browser and operating-system text scaling remain available.
   ========================================================================== */


/* ==========================================================================
   TYPOGRAPHY ALIASES
   ========================================================================== */

:root {

    /*
     * variables.css remains the source of the actual values.
     *
     * These aliases describe semantic typography roles and make
     * application/module CSS easier to standardize.
     */

    --livigo-type-body:
        var(--livigo-font-size-base);

    --livigo-type-interface:
        var(--livigo-font-size-sm);

    --livigo-type-supporting:
        var(--livigo-font-size-sm);

    --livigo-type-meta:
        var(--livigo-font-size-xs);

    --livigo-type-label:
        var(--livigo-font-size-sm);

    --livigo-type-input:
        var(--livigo-font-size-base);

    --livigo-type-button:
        var(--livigo-font-size-sm);

    --livigo-type-small:
        var(--livigo-font-size-xs);
}


/* ==========================================================================
   DOCUMENT BASE
   ========================================================================== */

html {
    font-size: 100%;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;
}


body {
    font-family:
        var(--livigo-font-sans);

    font-size:
        var(--livigo-type-body);

    line-height:
        var(--livigo-line-height-normal);

    font-weight:
        var(--livigo-font-weight-regular);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top:
        0;

    font-family:
        var(--livigo-font-display);

    line-height:
        var(--livigo-line-height-heading);

    font-weight:
        var(--livigo-font-weight-extrabold);

    overflow-wrap:
        break-word;
}


h1 {
    font-size:
        var(--livigo-font-size-3xl);
}


h2 {
    font-size:
        var(--livigo-font-size-2xl);
}


h3 {
    font-size:
        var(--livigo-font-size-xl);
}


h4 {
    font-size:
        var(--livigo-font-size-lg);
}


h5 {
    font-size:
        var(--livigo-font-size-base);
}


h6 {
    font-size:
        var(--livigo-font-size-sm);
}


/* ==========================================================================
   BODY TEXT
   ========================================================================== */

p {
    font-size:
        var(--livigo-type-body);

    line-height:
        var(--livigo-line-height-normal);
}


li,
dd,
dt {
    font-size:
        var(--livigo-type-body);

    line-height:
        var(--livigo-line-height-normal);
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {
    font-size:
        inherit;

    line-height:
        inherit;

    text-underline-offset:
        0.14em;
}


/* ==========================================================================
   STRONG / EMPHASIS
   ========================================================================== */

strong,
b {
    font-weight:
        var(--livigo-font-weight-bold);
}


em,
i {
    font-style:
        italic;
}


/* ==========================================================================
   LABELS
   ========================================================================== */

label {
    font-family:
        var(--livigo-font-sans);

    font-size:
        var(--livigo-type-label);

    line-height:
        1.4;

    font-weight:
        var(--livigo-font-weight-semibold);
}


/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

input,
select,
textarea {
    font-family:
        var(--livigo-font-sans);

    /*
     * Keep form content at 16px.
     *
     * This improves mobile readability and avoids shrinking
     * important customer-entered information.
     */
    font-size:
        var(--livigo-type-input);

    line-height:
        1.45;
}


button {
    font-family:
        var(--livigo-font-sans);

    font-size:
        var(--livigo-type-button);

    line-height:
        1.25;
}


input::placeholder,
textarea::placeholder {
    font-size:
        inherit;

    line-height:
        inherit;
}


/* ==========================================================================
   BUTTONS / ACTIONS
   ========================================================================== */

button,
.button,
.btn,
[role="button"] {
    font-family:
        var(--livigo-font-sans);

    font-size:
        var(--livigo-type-button);

    line-height:
        1.25;

    font-weight:
        var(--livigo-font-weight-bold);
}


/* ==========================================================================
   SMALL / HELPER TEXT
   ========================================================================== */

small,
.helper-text,
.hint,
.form-help,
.form-hint {
    font-size:
        var(--livigo-type-small);

    line-height:
        1.45;
}


/* ==========================================================================
   EYEBROWS / OVERLINES / KICKERS
   ========================================================================== */

.eyebrow,
.overline,
.kicker,
[class*="__eyebrow"],
[class*="__overline"],
[class*="__kicker"] {
    font-size:
        var(--livigo-type-meta);

    line-height:
        1.25;

    font-weight:
        var(--livigo-font-weight-bold);

    letter-spacing:
        var(--livigo-letter-spacing-wide);

    text-transform:
        uppercase;
}


/* ==========================================================================
   META / SECONDARY TEXT
   ========================================================================== */

.meta,
.metadata,
.secondary-text,
.muted,
[class*="__meta"],
[class*="__hint"],
[class*="__helper"] {
    font-size:
        var(--livigo-type-supporting);

    line-height:
        1.45;
}


/* ==========================================================================
   CARD TITLES
   ========================================================================== */

.card-title,
[class*="__title"] {
    line-height:
        1.25;
}


/* ==========================================================================
   BADGES / PILLS / STATUS
   ========================================================================== */

.badge,
.pill,
.status,
.status-badge,
[class*="__badge"],
[class*="__status"] {
    font-size:
        var(--livigo-type-meta);

    line-height:
        1.25;

    font-weight:
        var(--livigo-font-weight-semibold);
}


/* ==========================================================================
   TABLES
   ========================================================================== */

table,
th,
td {
    font-family:
        var(--livigo-font-sans);
}


th {
    font-size:
        var(--livigo-type-supporting);

    line-height:
        1.35;

    font-weight:
        var(--livigo-font-weight-bold);
}


td {
    font-size:
        var(--livigo-type-interface);

    line-height:
        1.5;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

nav,
nav a,
nav button,
.navigation,
.navigation a,
.sidebar,
.sidebar a,
.dock,
.dock a {
    font-family:
        var(--livigo-font-sans);
}


/* ==========================================================================
   CUSTOMER APP / MOBILE APPLICATION TYPOGRAPHY
   ========================================================================== */

.livigo-mobile-app {
    font-size:
        var(--livigo-type-body);
}


.livigo-mobile-app h1,
.livigo-mobile-app h2,
.livigo-mobile-app h3 {
    letter-spacing:
        -0.015em;
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL WORKSPACES
   ========================================================================== */

.account-body,
.property-partner-portal-page,
.moving-partner-portal-page,
.service-partner-portal-page {
    font-size:
        var(--livigo-type-interface);
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL PAGE TITLES
   ========================================================================== */

.property-partner-portal-page h1,
.moving-partner-portal-page h1,
.service-partner-portal-page h1,
.account-body h1 {
    font-size:
        var(--livigo-font-size-2xl);

    line-height:
        1.15;
}


.property-partner-portal-page h2,
.moving-partner-portal-page h2,
.service-partner-portal-page h2,
.account-body h2 {
    font-size:
        var(--livigo-font-size-xl);

    line-height:
        1.2;
}


.property-partner-portal-page h3,
.moving-partner-portal-page h3,
.service-partner-portal-page h3,
.account-body h3 {
    font-size:
        var(--livigo-font-size-lg);

    line-height:
        1.25;
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL BODY TEXT
   ========================================================================== */

.property-partner-portal-page p,
.moving-partner-portal-page p,
.service-partner-portal-page p,
.account-body p {
    font-size:
        var(--livigo-type-interface);

    line-height:
        1.5;
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL FORM CONTROLS
   ========================================================================== */

.property-partner-portal-page input,
.property-partner-portal-page select,
.property-partner-portal-page textarea,

.moving-partner-portal-page input,
.moving-partner-portal-page select,
.moving-partner-portal-page textarea,

.service-partner-portal-page input,
.service-partner-portal-page select,
.service-partner-portal-page textarea,

.account-body input,
.account-body select,
.account-body textarea {
    font-size:
        var(--livigo-type-input);
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL BUTTONS
   ========================================================================== */

.property-partner-portal-page button,
.moving-partner-portal-page button,
.service-partner-portal-page button,
.account-body button {
    font-size:
        var(--livigo-type-button);
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL LABELS
   ========================================================================== */

.property-partner-portal-page label,
.moving-partner-portal-page label,
.service-partner-portal-page label,
.account-body label {
    font-size:
        var(--livigo-type-label);
}


/* ==========================================================================
   ACCOUNT / PROFESSIONAL SMALL TEXT
   ========================================================================== */

.property-partner-portal-page small,
.moving-partner-portal-page small,
.service-partner-portal-page small,
.account-body small {
    font-size:
        var(--livigo-type-small);

    line-height:
        1.45;
}


/* ==========================================================================
   BOOKING / OPERATION ACTIONS
   ========================================================================== */

.property-booking-actions__button,
.property-booking-cancel__button {
    font-size:
        var(--livigo-type-button);
}


/* ==========================================================================
   BOOKING DECLINE / CANCEL FORMS
   ========================================================================== */

.property-booking-cancel__field > span {
    font-size:
        var(--livigo-type-label);
}


.property-booking-cancel__field select,
.property-booking-cancel__field textarea {
    font-size:
        var(--livigo-type-input);
}


.property-booking-cancel__field small {
    font-size:
        var(--livigo-type-small);
}


.property-booking-cancel__summary span {
    font-size:
        var(--livigo-type-small);
}


.property-booking-cancel__summary strong {
    font-size:
        var(--livigo-type-interface);
}


.property-booking-cancel__intro {
    font-size:
        var(--livigo-type-interface);

    line-height:
        1.5;
}


/* ==========================================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================================== */

/*
 * Important:
 *
 * Livigo does not reduce the root font size on mobile.
 *
 * Small screens should adapt through wrapping, stacking,
 * spacing and layout changes rather than making essential
 * customer information harder to read.
 */

@media (max-width: 47.5rem) {

    h1 {
        font-size:
            clamp(
                1.625rem,
                7vw,
                var(--livigo-font-size-3xl)
            );
    }


    h2 {
        font-size:
            clamp(
                1.375rem,
                5.5vw,
                var(--livigo-font-size-2xl)
            );
    }


    h3 {
        font-size:
            clamp(
                1.125rem,
                4.8vw,
                var(--livigo-font-size-xl)
            );
    }


    h4 {
        font-size:
            var(--livigo-font-size-lg);
    }


    /*
     * Body text intentionally remains at the global readable
     * size. It is not reduced simply because the viewport
     * becomes smaller.
     */

    body,
    p,
    li,
    dd,
    dt {
        font-size:
            var(--livigo-type-body);
    }


    /*
     * Mobile form controls remain readable.
     */

    input,
    select,
    textarea {
        font-size:
            var(--livigo-type-input);
    }


    button,
    .button,
    .btn,
    [role="button"] {
        font-size:
            var(--livigo-type-button);
    }


    /*
     * Professional and account interfaces may remain compact,
     * but never collapse into miniature typography.
     */

    .property-partner-portal-page h1,
    .moving-partner-portal-page h1,
    .service-partner-portal-page h1,
    .account-body h1 {
        font-size:
            var(--livigo-font-size-2xl);
    }


    .property-partner-portal-page h2,
    .moving-partner-portal-page h2,
    .service-partner-portal-page h2,
    .account-body h2 {
        font-size:
            var(--livigo-font-size-xl);
    }


    .property-partner-portal-page h3,
    .moving-partner-portal-page h3,
    .service-partner-portal-page h3,
    .account-body h3 {
        font-size:
            var(--livigo-font-size-lg);
    }


    .property-partner-portal-page p,
    .moving-partner-portal-page p,
    .service-partner-portal-page p,
    .account-body p {
        font-size:
            var(--livigo-type-interface);
    }


    .property-booking-cancel__card h1 {
        font-size:
            var(--livigo-font-size-2xl);
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

/*
 * Very small screens receive layout pressure relief only.
 * Essential typography is intentionally not reduced.
 */

@media (max-width: 30rem) {

    h1 {
        font-size:
            clamp(
                1.5rem,
                7.5vw,
                1.75rem
            );
    }


    h2 {
        font-size:
            clamp(
                1.25rem,
                6vw,
                1.5rem
            );
    }


    h3 {
        font-size:
            clamp(
                1.0625rem,
                5vw,
                1.25rem
            );
    }


    .property-partner-portal-page h1,
    .moving-partner-portal-page h1,
    .service-partner-portal-page h1,
    .account-body h1 {
        font-size:
            1.5rem;
    }


    .property-partner-portal-page h2,
    .moving-partner-portal-page h2,
    .service-partner-portal-page h2,
    .account-body h2 {
        font-size:
            1.25rem;
    }

}


/* ==========================================================================
   TEXT OVERFLOW SAFETY
   ========================================================================== */

p,
li,
dd,
dt,
label,
small,
strong,
a,
button,
input,
select,
textarea {
    overflow-wrap:
        break-word;
}


input,
select,
textarea {
    max-width:
        100%;
}


/* ==========================================================================
   USER TEXT SCALING
   ========================================================================== */

/*
 * Do not disable zoom or operating-system text enlargement.
 *
 * This layer intentionally avoids:
 * - user-scalable=no
 * - maximum-scale=1
 * - fixed mobile root-size reduction
 *
 * Layout modules must tolerate enlarged text.
 */


/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

}