:root {
    --project-font-body: "Google Sans", Arial, sans-serif;
    --project-font-heading: "Noto Sans Thai", "Google Sans", Arial, sans-serif;
    --project-font-size-body: 16px;
    --project-font-size-readable-min: 12px;
    --project-line-height-body: 1.55;
    --project-line-height-compact: 1.45;
}

/*
 * Project-wide typography. The exclusions preserve icon and monospace fonts
 * used by Atlantis, Font Awesome, Flaticon and code blocks.
 */
html body:not(#project-font-override),
html body:not(#project-font-override) :where(
    *:not(i):not(svg):not(path):not(code):not(pre):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="flaticon-"]):not([class*=" flaticon-"]):not([class^="icon-"]):not([class*=" icon-"])
) {
    font-family: var(--project-font-body) !important;
}

/*
 * Readability baseline for the screens used throughout the day.  The rule is
 * intentionally component-based instead of using a universal font-size
 * override, so headings, dashboard figures and icon fonts keep their visual
 * hierarchy.
 */
html body:not(#project-font-override) {
    font-size: var(--project-font-size-body);
    line-height: var(--project-line-height-body);
}

html body:not(#project-font-override) :where(
    p,
    li,
    dt,
    dd,
    label,
    input,
    select,
    textarea,
    button,
    .btn,
    .btn-sm,
    .form-control,
    .custom-select,
    .custom-file-label,
    .input-group-text,
    .dropdown-item,
    .nav-link,
    .breadcrumb,
    .breadcrumb-item,
    .page-link,
    .dataTables_info,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .form-text,
    .help-block,
    .badge,
    .label,
    .notification,
    small,
    .small,
    sup
) {
    font-size: var(--project-font-size-readable-min) !important;
    line-height: var(--project-line-height-compact);
}

html body:not(#project-font-override) table,
html body:not(#project-font-override) table :where(th, td) {
    font-size: var(--project-font-size-readable-min) !important;
    line-height: var(--project-line-height-compact);
}

/* Atlantis applies smaller sizes to these nested text elements. */
html body:not(#project-font-override) :where(
    .breadcrumbs,
    .breadcrumbs a,
    .text-section,
    h6,
    .h6,
    table span.font-bold
) {
    font-size: var(--project-font-size-readable-min) !important;
}

/* Input text at 16px is easier to read and avoids automatic zoom on phones. */
html body:not(#project-font-override) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .custom-select
) {
    font-size: var(--project-font-size-body) !important;
}

/* Keep Thai vowel marks and tone marks from colliding in compact UI labels. */
html body:not(#project-font-override) :where(
    .btn,
    .badge,
    .label,
    .nav-link,
    .dropdown-item,
    .breadcrumb,
    .page-link,
    small,
    .small,
    sup
) {
    line-height: var(--project-line-height-compact) !important;
}

html body:not(#project-font-override) h1,
html body:not(#project-font-override) h2,
html body:not(#project-font-override) .h1,
html body:not(#project-font-override) .h2,
html body:not(#project-font-override) :is(h1, h2, .h1, .h2) :where(
    *:not(i):not(svg):not(path):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^="fa-"]):not([class*=" fa-"]):not([class^="flaticon-"]):not([class*=" flaticon-"]):not([class^="icon-"]):not([class*=" icon-"])
) {
    font-family: var(--project-font-heading) !important;
}

/*
 * The style editor contains a deliberately scaled-down website preview.
 * Preserve that preview's proportions; it is an illustration rather than
 * interface text that users must read to complete a task.
 */
html body:not(#project-font-override) .style-preview-frame .style-live-welcome p {
    font-size: 11px !important;
}

html body:not(#project-font-override) .style-preview-frame .style-live-welcome small {
    font-size: 9px !important;
}

html body:not(#project-font-override) .style-preview-frame .style-live-menu-grid small {
    font-size: 8px !important;
}