/* Single typography policy for the platform and its embedded workspaces.
 * New text defaults to content. Use a heading element or data-ui-text="title"
 * for a heading; data-ui-text="content" overrides a heading's inherited role.
 * Keep icon geometry out of the text policy. The important layer intentionally
 * wins over legacy page, component, inline and responsive font-size rules.
 */
@layer platform-typography {
  :root {
    --ui-font-title: 18px;
    --ui-font-content: 14px;
    --el-font-size-base: var(--ui-font-content);
    --el-font-size-small: var(--ui-font-content);
    --el-font-size-extra-small: var(--ui-font-content);
    --el-font-size-medium: var(--ui-font-content);
    --el-font-size-large: var(--ui-font-title);
    --el-font-size-extra-large: var(--ui-font-title);
  }

  body, body :where(*):not(:where(svg, svg *, .el-icon, .el-icon *,
    [class$="__icon"], [class$="__icon"] *, [class$="-icon"], [class$="-icon"] *,
    .sidebar-toggle, .sidebar-toggle *, .brand__mark, .brand__mark *,
    .brand-mark, .brand-mark *, [data-ui-text="icon"], [data-ui-text="icon"] *)) {
    font-size: var(--ui-font-content) !important;
  }

  body :is(h1, h2, h3, h4, h5, h6, [role="heading"],
    .el-dialog__title, .el-drawer__title, .el-message-box__title,
    .panel__title, .section-title, .page-title, .card-title,
    [data-ui-text="title"]) {
    font-size: var(--ui-font-title) !important;
    font-weight: 600;
    line-height: 1.4;
  }
  body :is(h1, h2, h3, h4, h5, h6, [role="heading"],
    .el-dialog__title, .el-drawer__title, .el-message-box__title,
    .panel__title, .section-title, .page-title, .card-title,
    [data-ui-text="title"]) :where(span, strong, b, em, a) {
    font-size: inherit !important;
  }
  body [data-ui-text="content"], body [data-ui-text="content"] * {
    font-size: var(--ui-font-content) !important;
  }
}