/* One typography scale for the complete data asset workspace.
   Appearance themes own surfaces; these semantic values stay stable. */
html[data-theme="f"][data-color-theme="blue"]{
  --ui-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --field-font: var(--ui-font-family);
  --action-font: var(--ui-font-family);
  --field-size: 13px;
  --field-label-size: 12px;
  --ui-size-caption: 12px;
  --ui-size-label: 12px;
  --ui-size-body: 13px;
  --ui-weight-body: 500;
  --ui-weight-label: 500;
  --ui-weight-heading: 600;
  --text-3: #64748b;
}

html[data-theme="f"][data-color-theme="blue"] #loginScreen, html[data-theme="f"][data-color-theme="blue"] #loginScreen .login-card{
  font-family: var(--ui-font-family);
}

html[data-theme="f"][data-color-theme="blue"] body, html[data-theme="f"][data-color-theme="blue"] :is(.content, .modal, .drawer-panel, .unified-select-menu, .settings-user-dialog, .profile-dialog){
  font-family: var(--ui-font-family);
}

html[data-theme="f"][data-color-theme="blue"] body{
  font-weight: var(--ui-weight-body);
}

html[data-theme="f"][data-color-theme="blue"] :is(button, input, select, textarea){
  font-family: var(--ui-font-family);
}

/* Page chrome follows the same weight and color hierarchy in both appearances. */
html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .workspace-title strong{
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .workspace-title span{
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .content .toolbar-title{
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .sidebar-brand{
  font-family: var(--ui-font-family);
  font-size: 16px;
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) .tree-row .node-name{
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] .content .breadcrumb{
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] .content .breadcrumb :is(b, .breadcrumb-label){
  color: var(--text);
  font-weight: 600;
}

/* The two visual themes share one scale; only their surfaces and accent colors vary. */
html[data-theme="f"][data-color-theme="blue"]:is([data-appearance="standard"], [data-appearance="macos27"]) #panel{
  color: var(--text);
  font-family: var(--ui-font-family);
  font-size: var(--ui-size-body);
  font-weight: var(--ui-weight-body);
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(h1, h2, h3, h4, h5){
  color: var(--text);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-weight-heading);
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(b, strong){
  color: var(--text);
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(p, li, dd, dt){
  font-size: 12px;
  font-weight: var(--ui-weight-body);
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(p, small, label, span, em, a, button, th, td, li, dt, dd, output, time){
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] #panel span:not([class*="icon"]):not([class*="data-value"]):not([class*="data-tag"]):not(.record-name-label):not(.brand-store-address):not([aria-hidden="true"]){
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme="f"][data-color-theme="blue"] #panel em:not([class*="icon"]){
  font-size: 11px;
}

html[data-theme="f"][data-color-theme="blue"] #panel small, html[data-theme="f"][data-color-theme="blue"] :is(.modal, .drawer-panel, .settings-user-dialog, .profile-dialog) small{
  font-size: var(--ui-size-caption);
  font-weight: var(--ui-weight-body);
  line-height: 1.45;
}

html[data-theme="f"][data-color-theme="blue"] #panel small:not([role="alert"]):not([class*="error"]):not([class*="danger"]):not([class*="warning"]):not([class*="status"]):not([class*="tag"]), html[data-theme="f"][data-color-theme="blue"] :is(.modal, .drawer-panel, .settings-user-dialog, .profile-dialog) small:not([role="alert"]):not([class*="error"]):not([class*="danger"]):not([class*="warning"]):not([class*="status"]):not([class*="tag"]){
  color: var(--text-2);
}

html[data-theme="f"][data-color-theme="blue"] #panel label{
  color: var(--text-2);
  font-size: var(--ui-size-label);
  font-weight: var(--ui-weight-label);
  line-height: 1.5;
}

/* Shared tabs no longer inherit tiny or extra-light per-page settings. */
html[data-theme="f"][data-color-theme="blue"] #panel :is(
  .settings-tabs, .data-version-tabs, .dashboard-view-switch,
  .coverage-domain-tabs, .delivery-tabs, .spatial-tabs, .bq-tabs,
  .anomaly-tabs, .governance-config-tabs, .coordinate-result-tabs
) button{
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(
  .settings-tabs, .data-version-tabs, .dashboard-view-switch,
  .coverage-domain-tabs, .delivery-tabs, .spatial-tabs, .bq-tabs,
  .anomaly-tabs, .governance-config-tabs, .coordinate-result-tabs
) button:is(.active, [aria-selected="true"], [aria-pressed="true"]){
  color: var(--accent);
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(label, .form-hint, .field-hint){
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.data-card p, .dashboard-card p, .record-section-title p, .data-card header p){
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea){
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

/* Listing tables use one readable header/body scale and remain inside their scroll containers. */
html[data-theme="f"][data-color-theme="blue"] #panel table{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel .data-value{
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] #panel .data-field-value{
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

html[data-theme="f"][data-color-theme="blue"] #panel table thead th{
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

html[data-theme="f"][data-color-theme="blue"] #panel table tbody td{
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel table tbody td b, html[data-theme="f"][data-color-theme="blue"] #panel table tbody td strong{
  color: var(--text);
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel table :is(code, pre){
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
}

/* Record cards share a label/value contrast, regardless of dataset or appearance. */
html[data-theme="f"][data-color-theme="blue"] #panel .data-card > :is(h3, h4, .record-section-title, header, .field-preview-head, .anomaly-file-section-heading) :is(h3, h4), html[data-theme="f"][data-color-theme="blue"] #panel .data-card > :is(h3, h4){
  color: var(--text);
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel .data-card :is(.record-value, .record-fields > .form-row, .store-info-field) > label, html[data-theme="f"][data-color-theme="blue"] #panel .data-card :is(.field-preview-table > div > span, .anomaly-file-reference dt, .data-source-card dt){
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] #panel .data-card :is(.record-value > div, .store-info-field > strong, .field-preview-table b, .anomaly-file-reference dd, .data-source-card dd){
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

/* Permission settings had the largest 8–10px cluster; align both user and role views. */
html[data-theme="f"][data-color-theme="blue"] #panel :is(.settings-head h2, .role-grid h3, .permission-config-title h3){
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.settings-head p, .role-grid p, .role-grid small, .permission-config-title p, .role-list-group > div > p, .role-list-empty, .role-department-note, .role-description-input){
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.settings-role-tag, .permission-tags span, .role-list-group > header em){
  font-size: 11px;
  font-weight: 500;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.role-sidebar-tools input, .role-sidebar-tools select, .role-department-field select, .role-department-field, .domain-check){
  font-size: 12px;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.role-list-group > header span, .role-list-item b, .permission-config-title h3, .permission-group h4, .permission-check b){
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is(.permission-check small, .role-list-item small, .role-list-group > small, .role-department-note, .role-editor-kicker){
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
}

/* Keep common action text readable when older page rules used 8–10px labels. */
html[data-theme="f"][data-color-theme="blue"] #panel :is(.btn, .link, [role="button"]:not([aria-label])){
  font-family: var(--ui-font-family);
  font-size: 12px;
  font-weight: 550;
}

html[data-theme="f"][data-color-theme="blue"] #panel :is([class$="-hint"], [class$="-note"], [class$="-description"], [class$="-subtitle"], [class$="-summary"], [class$="-empty"], [class$="-meta"]){
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme="f"][data-color-theme="blue"] :is(.modal, .drawer-panel, .unified-select-menu, .settings-user-dialog, .profile-dialog) :is(h1, h2, h3, h4){
  color: var(--text);
  font-family: var(--ui-font-family);
  font-weight: 600;
}

html[data-theme="f"][data-color-theme="blue"] :is(.modal, .drawer-panel, .unified-select-menu, .settings-user-dialog, .profile-dialog) :is(p, label, li, dt, dd){
  font-family: var(--ui-font-family);
  font-weight: 500;
}

@media (max-width: 640px) {
  html[data-theme="f"][data-color-theme="blue"] #panel :is(.settings-tabs, .data-version-tabs, .dashboard-view-switch, .delivery-tabs, .spatial-tabs, .bq-tabs, .anomaly-tabs){
    scrollbar-width: thin;
  }
}