/*
 * SunshineID shared typography contract (V139).
 * This file owns type family, size, line-height and weight only. Business pages
 * map their components to these tokens; colors and layout remain page-owned.
 */
:root {
  --font-family-sans: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-family-technical: var(--font-family-sans);

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

  --type-display-size: 52px;
  --type-display-leading: 60px;
  --type-display-weight: var(--font-weight-heavy);
  --type-h1-size: 34px;
  --type-h1-leading: 44px;
  --type-h1-weight: var(--font-weight-heavy);
  --type-h2-size: 24px;
  --type-h2-leading: 34px;
  --type-h2-weight: var(--font-weight-bold);
  --type-h3-size: 17px;
  --type-h3-leading: 26px;
  --type-h3-weight: var(--font-weight-semibold);
  --type-h4-size: 16px;
  --type-h4-leading: 26px;
  --type-h4-weight: var(--font-weight-semibold);
  --type-emphasis-size: 16px;
  --type-emphasis-leading: 26px;
  --type-emphasis-weight: var(--font-weight-medium);
  --type-body-size: 14px;
  --type-body-leading: 22px;
  --type-body-weight: var(--font-weight-regular);
  --type-secondary-size: 14px;
  --type-secondary-leading: 22px;
  --type-secondary-weight: var(--font-weight-regular);
  --type-label-size: 13px;
  --type-label-leading: 20px;
  --type-label-weight: var(--font-weight-semibold);
  --type-micro-size: 12px;
  --type-micro-leading: 18px;
  --type-micro-weight: var(--font-weight-regular);
  --type-technical-size: 12px;
  --type-technical-leading: 18px;
  --type-technical-weight: var(--font-weight-regular);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

.type-display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
  font-weight: var(--type-display-weight);
}

.type-h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-leading);
  font-weight: var(--type-h1-weight);
}

.type-h2,
.ui-dialog-title,
.ui-empty-title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  font-weight: var(--type-h2-weight);
}

.type-h3,
.ui-card-title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--type-h3-weight);
}

.type-h4 {
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-leading);
  font-weight: var(--type-h4-weight);
}

.type-emphasis {
  font-size: var(--type-emphasis-size);
  line-height: var(--type-emphasis-leading);
  font-weight: var(--type-emphasis-weight);
}

.type-body,
.ui-body,
.ui-form-control,
.ui-table-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--type-body-weight);
}

.type-secondary,
.ui-help,
.ui-empty-body {
  font-size: var(--type-secondary-size);
  line-height: var(--type-secondary-leading);
  font-weight: var(--type-secondary-weight);
}

.type-label,
.ui-label,
.ui-status,
.ui-table-head {
  font-size: var(--type-label-size);
  line-height: var(--type-label-leading);
  font-weight: var(--type-label-weight);
}

.type-micro {
  font-size: var(--type-micro-size);
  line-height: var(--type-micro-leading);
  font-weight: var(--type-micro-weight);
}

.type-technical {
  font-family: var(--font-family-technical);
  font-size: var(--type-technical-size);
  line-height: var(--type-technical-leading);
  font-weight: var(--type-technical-weight);
}

.ui-button,
.ui-primary-filter {
  font-size: var(--type-body-size);
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
}

/* Icons have an independent visual size and are not readable-text tokens. */
.type-icon {
  font-size: var(--icon-size, 1em);
  line-height: 1;
}

@media (max-width: 768px) {
  :root {
    --type-display-size: 40px;
    --type-h1-size: 30px;
    --type-h2-size: 22px;
    --type-h3-size: 17px;
    --type-h4-size: 16px;
    --type-emphasis-size: 15px;
  }
}

/* V154 site-wide readability contract.
 * Page styles may still own layout and emphasis, but controls, table copy and
 * auxiliary text must not fall below the approved production scale. */
body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-regular);
}

button {
  font-size: var(--type-body-size) !important;
  line-height: 20px !important;
  font-weight: var(--font-weight-semibold);
}

input,
select,
textarea {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-leading) !important;
  font-weight: var(--font-weight-regular);
}

label,
legend,
th {
  font-size: var(--type-label-size) !important;
  line-height: var(--type-label-leading) !important;
}

td {
  font-size: var(--type-label-size) !important;
  line-height: var(--type-label-leading) !important;
}

small,
.caption,
.ui-caption {
  font-size: var(--type-micro-size) !important;
  line-height: var(--type-micro-leading) !important;
}