:root {
    --font-main: 'Roboto', sans-serif;
    --cbm-font-family: var(--font-main);
    --cbm-fw-regular: 400;
    --cbm-fw-medium: 600;
    --cbm-fw-bold: 800;
    --cbm-fs-1: 12px;
    --cbm-fs-2: 13px;
    --cbm-fs-3: 14px;
    --cbm-fs-4: 16px;
    --cbm-fs-5: 20px;
    --cbm-fs-6: 24px;
    --cbm-lh-tight: 1.2;
    --cbm-lh-base: 1.45;
    --cbm-lh-loose: 1.6;
    --cbm-fs-xxs: var(--cbm-fs-1);
    --cbm-fs-xs: var(--cbm-fs-1);
    --cbm-fs-sm: var(--cbm-fs-2);
    --cbm-fs-md: var(--cbm-fs-3);
    --cbm-fs-lg: var(--cbm-fs-4);
    --cbm-fs-xl: var(--cbm-fs-6);
}

html { font-family: var(--cbm-font-family); }
body { font-family: var(--cbm-font-family); }

.layout,
.cbm-auth {
    font-family: var(--cbm-font-family);
    font-size: var(--cbm-fs-3);
    line-height: var(--cbm-lh-base);
}

.layout h1,
.cbm-auth h1 {
    font-size: var(--cbm-fs-6);
    font-weight: var(--cbm-fw-bold);
    line-height: var(--cbm-lh-tight);
}

.layout h2,
.cbm-auth h2 {
    font-size: var(--cbm-fs-5);
    font-weight: var(--cbm-fw-bold);
    line-height: var(--cbm-lh-tight);
}

.layout h3,
.cbm-auth h3 {
    font-size: var(--cbm-fs-4);
    font-weight: var(--cbm-fw-bold);
    line-height: var(--cbm-lh-tight);
}

.layout p,
.cbm-auth p {
    font-size: var(--cbm-fs-3);
    line-height: var(--cbm-lh-loose);
}

.layout small,
.cbm-auth small,
.layout .muted,
.cbm-auth .muted,
.layout .cbm-muted,
.cbm-auth .cbm-muted {
    font-size: var(--cbm-fs-1);
    line-height: var(--cbm-lh-base);
}

.layout label,
.cbm-auth label,
.layout .cbm-label,
.cbm-auth .cbm-label {
    font-size: var(--cbm-fs-1);
    font-weight: var(--cbm-fw-bold);
    line-height: var(--cbm-lh-base);
    letter-spacing: .01em;
}

.layout input,
.layout textarea,
.layout select,
.cbm-auth input,
.cbm-auth textarea,
.cbm-auth select {
    font-family: var(--cbm-font-family);
    font-size: var(--cbm-fs-2);
    font-weight: var(--cbm-fw-regular);
    line-height: var(--cbm-lh-base);
}

.layout button,
.layout .btn,
.cbm-auth button,
.cbm-auth .btn {
    font-family: var(--cbm-font-family);
    font-size: var(--cbm-fs-2);
    font-weight: var(--cbm-fw-bold);
}

.layout .table th,
.cbm-auth .table th,
.layout table th,
.cbm-auth table th {
    font-size: var(--cbm-fs-1);
    font-weight: var(--cbm-fw-bold);
}

.layout .table td,
.cbm-auth .table td,
.layout table td,
.cbm-auth table td {
    font-size: var(--cbm-fs-2);
    font-weight: var(--cbm-fw-regular);
}

.layout .err,
.cbm-auth .err,
.layout .alert,
.cbm-auth .alert {
    font-size: var(--cbm-fs-2);
    line-height: var(--cbm-lh-base);
}

@media (max-width: 700px) {
    .layout h1,
    .cbm-auth h1 {
        font-size: var(--cbm-fs-5);
    }
    .layout h2,
    .cbm-auth h2 {
        font-size: var(--cbm-fs-4);
    }
}