/*
 * CaiReport shared typography system
 * Base: 15px / 400, descriptions: 14px / 400,
 * headings: increase by 2px from h6 (17px) to h1 (27px).
 */
:root {
    --font-family-base: "Sarabun", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
    --font-weight-normal: 400;
    --font-weight-heading: 600;
    --font-size-body: 15px;
    --font-size-description: 14px;
    --font-size-h6: 17px;
    --font-size-h5: 19px;
    --font-size-h4: 21px;
    --font-size-h3: 23px;
    --font-size-h2: 25px;
    --font-size-h1: 27px;
    --line-height-body: 1.5;
    --line-height-heading: 1.35;
}

html,
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

h1,
.heading-1 { font-size: var(--font-size-h1); }
h2,
.heading-2 { font-size: var(--font-size-h2); }
h3,
.heading-3 { font-size: var(--font-size-h3); }
h4,
.heading-4 { font-size: var(--font-size-h4); }
h5,
.heading-5 { font-size: var(--font-size-h5); }
h6,
.heading-6 { font-size: var(--font-size-h6); }

.text-body,
.button,
.nav-list a,
.sidebar-user strong,
.date-pill,
.field label,
.check-field strong,
.password-toggle,
.alert,
table,
table th,
table td,
table code,
.login-help strong {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
}

small,
.text-description,
.brand small,
.topbar-context,
.page-heading p:not(.eyebrow),
.form-lead,
.field > small,
.field-error,
.welcome-panel p:not(.eyebrow),
.login-message > p:last-child,
.login-help,
.credentials-card p:not(.eyebrow),
.credentials-card dt,
.stat-card span,
.stat-card small,
.sidebar-user small,
td small,
.result-count {
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
}

/* Component selectors override legacy component-specific sizes. */
.page-heading h1,
.login-message h1,
.error-page h1 { font-size: var(--font-size-h1); }

.login-card h2,
.welcome-panel h2,
.credentials-card h2,
.profile-details h2 { font-size: var(--font-size-h2); }