/* ==========================================================================
   Typography scale
   --------------------------------------------------------------------------
   Every font-size in the app is declared here, in ONE place, with selectors
   that share the same value grouped together. To change a size everywhere
   it's used, edit the value on the matching rule below - there's no need to
   hunt through main-page.css / booking-page.css / settings.css / pin-page.css
   / site.css individually.

   NOTE: this app still supports Chromium 39/40 (Android 5.1.1 WebView) - see
   the var(--bs-*)/Bootstrap comment in site.css. That engine doesn't support
   CSS custom properties (var()), so this file can't use CSS variables/design
   tokens. Plain grouped selectors are the closest equivalent that still
   works there.

   IMPORTANT: this file must be linked on every page (see _Layout.cshtml)
   and must load before any page-specific stylesheet. None of the page CSS
   files set font-size anymore - if one does, it will silently win the
   cascade and defeat the single-source-of-truth goal here, so add new sizes
   here instead of in a page's own .css file.
   ========================================================================== */

/* ---- Base sizes (no media query) ---------------------------------------- */

/* 14px */
.settings-page__device-info {
    font-size: 14px;
}

/* 18px */
.main-page__next-meeting-time-bookby,
.app-dialog__message,
.app-dialog__button {
    font-size: 18px;
}

/* 20px */
.main-page__connection-error-subtitle,
.main-page__slot-label,
.main-page__hint,
.booking-page__row label,
.booking-page__row span,
.app-button,
.app-input {
    font-size: 20px;
}

/* 22px */
.main-page__next-meeting-title,
.settings-page__section-title,
.app-banner,
.app-dialog__title {
    font-size: 22px;
}

/* 25px */
.main-page__date,
.main-page__status-time,
.main-page__current-booking-meta,
.main-page__action-button {
    font-size: 25px;
}

/* 28px */
.main-page__next-meeting-text,
.pin-page__title {
    font-size: 28px;
}

/* 30px */
.main-page__status-label,
.main-page__current-booking-started,
.settings-page__title,
.pin-page__input {
    font-size: 30px;
}

/* 32px */
.main-page__connection-error-title,
.booking-page__confirm-icon {
    font-size: 32px;
}

/* 34px */
.booking-page__title {
    font-size: 34px;
}

/* 42px */
.main-page__current-booking-title {
    font-size: 42px;
}

/* 46px */
.main-page__time {
    font-size: 46px;
}

/* 50px */
.main-page__room-name {
    font-size: 50px;
}

/* ---- main-page.css breakpoint: (max-width: 700px), (max-height: 450px) -- */
@media (max-width: 700px), (max-height: 450px) {
    /* 13px */
    .main-page__next-meeting-title,
    .main-page__next-meeting-time-bookby,
    .main-page__slot-label {
        font-size: 13px;
    }

    /* 15px */
    .main-page__date,
    .main-page__next-meeting-text,
    .main-page__hint {
        font-size: 15px;
    }

    /* 16px */
    .main-page__current-booking-meta,
    .main-page__action-button {
        font-size: 16px;
    }

    /* 17px */
    .main-page__current-booking-started {
        font-size: 17px;
    }

    /* 18px */
    .main-page__status-label,
    .main-page__status-time {
        font-size: 18px;
    }

    /* 21px */
    .main-page__time {
        font-size: 21px;
    }

    /* 22px */
    .main-page__current-booking-title {
        font-size: 22px;
    }

    /* 24px */
    .main-page__room-name {
        font-size: 24px;
    }
}

/* ---- main-page.css breakpoint: (max-width: 400px), (max-height: 320px) -- */

@media (max-width: 400px), (max-height: 320px) {
    /* 14px */
    .main-page__date {
        font-size: 14px;
    }

    /* 15px */
    .main-page__current-booking-meta,
    .main-page__action-button {
        font-size: 15px;
    }

    /* 16px */
    .main-page__status-label,
    .main-page__status-time {
        font-size: 16px;
    }

    /* 18px */
    .main-page__time {
        font-size: 18px;
    }

    /* 19px */
    .main-page__current-booking-title {
        font-size: 19px;
    }

    /* 20px */
    .main-page__room-name {
        font-size: 20px;
    }
}

/* ---- booking-page.css breakpoint: (max-width: 700px) --------------------- */

@media (max-width: 700px) {
    /* 26px */
    .booking-page__title {
        font-size: 26px;
    }
}

/* ---- shared (max-width: 480px) breakpoint -------------------------------- */
/* booking-page.css, settings.css, pin-page.css and site.css all use this
   breakpoint for their mobile overrides, so their sizes are grouped here. */

@media (max-width: 480px) {
    /* 14px */
    .app-nav-button {
        font-size: 14px;
    }

    /* 15px */
    .app-button,
    .app-dialog__message,
    .app-dialog__button {
        font-size: 15px;
    }

    /* 16px */
    .app-input {
        font-size: 16px;
    }

    /* 18px */
    .booking-page__row span,
    .booking-page__row label,
    .app-banner,
    .app-dialog__title {
        font-size: 18px;
    }

    /* 19px */
    .settings-page__section-title {
        font-size: 19px;
    }

    /* 22px */
    .settings-page__title,
    .pin-page__title {
        font-size: 22px;
    }

    /* 24px */
    .booking-page__confirm-icon,
    .pin-page__input {
        font-size: 24px;
    }

    /* 26px */
    .booking-page__title {
        font-size: 26px;
    }
}