/*
 * Typography tokens.
 *
 * The whole product is set in Comfortaa — headings, body, captions and
 * actions alike. Inter and Roboto Mono appear in the Figma "Fonts" frame but
 * only label the specification sheet itself; they are not product fonts.
 *
 * Heading sizes are responsive, with the step at 1440px like the spacing:
 *
 *   token   >= 1440    < 1440
 *   H1      40 / 48    32 / 40
 *   H2      32 / 40    24 / 28
 *   H3      24 / 28    20 / 24
 *   H4      20 / 24    16 / 20
 *
 * H5, H6, body, caption and action sizes are the same in the four modes.
 *
 * NOTE: the "Fonts" frame prints a size column that disagrees with the bound
 * variables (it reads "32px" next to an H1 bound to 40px). The variables win:
 * they are what the maquettes actually consume.
 */

:root {
    --mo-font-family: 'Comfortaa', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;

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

    /* Headings — mobile tier (< 1440px). */
    --mo-font-size-h1: 32px;
    --mo-line-height-h1: 40px;
    --mo-font-size-h2: 24px;
    --mo-line-height-h2: 28px;
    --mo-font-size-h3: 20px;
    --mo-line-height-h3: 24px;
    --mo-font-size-h4: 16px;
    --mo-line-height-h4: 20px;
    --mo-font-size-h5: 16px;
    --mo-line-height-h5: 20px;
    --mo-font-size-h6: 14px;
    --mo-line-height-h6: 16px;

    /* Body */
    --mo-font-size-body-sm: 14px;
    --mo-line-height-body-sm: 20px;
    --mo-font-size-body-md: 16px;
    --mo-line-height-body-md: 24px;
    --mo-font-size-body-lg: 18px;
    --mo-line-height-body-lg: 28px;

    /* Caption */
    --mo-font-size-caption: 12px;
    --mo-line-height-caption: 14px;

    /* Action */
    --mo-font-size-btn: 16px;
    --mo-line-height-btn: 20px;
    --mo-font-size-link: 16px;
    --mo-line-height-link: 20px;

    /* Weight per role, as bound in Figma. */
    --mo-font-weight-h1: var(--mo-font-weight-bold);
    --mo-font-weight-h2: var(--mo-font-weight-bold);
    --mo-font-weight-h3: var(--mo-font-weight-semibold);
    --mo-font-weight-h4: var(--mo-font-weight-semibold);
    --mo-font-weight-h5: var(--mo-font-weight-semibold);
    --mo-font-weight-h6: var(--mo-font-weight-bold);
    --mo-font-weight-body: var(--mo-font-weight-regular);
    --mo-font-weight-caption: var(--mo-font-weight-regular);
    --mo-font-weight-caption-strong: var(--mo-font-weight-semibold);
    --mo-font-weight-btn: var(--mo-font-weight-medium);
    --mo-font-weight-link: var(--mo-font-weight-medium);
}

@media (min-width: 1440px) {
    :root {
        --mo-font-size-h1: 40px;
        --mo-line-height-h1: 48px;
        --mo-font-size-h2: 32px;
        --mo-line-height-h2: 40px;
        --mo-font-size-h3: 24px;
        --mo-line-height-h3: 28px;
        --mo-font-size-h4: 20px;
        --mo-line-height-h4: 24px;
    }
}