@import url("local-fonts.css");

/* Presentation profiles share color roles, spacing and hit targets. Each preview is a complete scope. */
.di-theme-gallery {
  --di-tab-panels-flex: none;
  --di-tab-panel-position: static;
}

:root,
.di-theme-gallery {
  --di-theme-font: initial;
  --di-profile-body-font: var(--di-font);
  --di-profile-display-font: var(--di-body-font);
  --di-profile-label-font: var(--di-body-font);
  --di-body-font: var(--di-theme-font, var(--di-profile-body-font));
  --di-display-font: var(--di-theme-font, var(--di-profile-display-font));
  /* Operative navigation (tabs) reads as text, separate from short micro-labels; it follows the body face. */
  --di-profile-navigation-font: var(--di-profile-body-font);
  --di-label-font: var(--di-theme-font, var(--di-profile-label-font));
  --di-navigation-font: var(--di-theme-font, var(--di-profile-navigation-font));
  --di-body-size: 0.9375rem;
  --di-body-leading: 1.55;
  --di-input-border-width: 1px;
  --di-input-border-block-end-width: var(--di-input-border-width);
  --di-input-border-style: solid;
  --di-input-border-color: var(--di-border);
  --di-input-radius: var(--di-radius-md);
  --di-button-radius: var(--di-radius-md);
  --di-card-radius: var(--di-radius-lg);
  --di-panel-radius: var(--di-radius-lg);
  --di-dialog-radius: var(--di-radius-md);
  --di-display-tracking: normal;
  /* Width axis of the display face (Archivo 100–125%); faces without the axis simply keep their width. */
  --di-display-stretch: normal;
  --di-record-title-size: var(--di-type-page-title);
  --di-record-title-weight: 600;
  --di-record-title-leading: 1.3;
  --di-micro-label-tracking: normal;
  --di-micro-label-case: none;
  --di-micro-label-size: var(--di-text-sm);
  /* Uppercase section labels (home hub bands); Standard keeps its current spacing. */
  --di-section-label-tracking: normal;
  --di-group-border-width: var(--di-border-width);
  --di-group-border-style: solid;
  --di-group-border-color: var(--di-border);
  --di-group-radius: var(--di-radius-md);
  --di-group-surface: var(--di-surface-subtle);
  --di-group-shadow: none;
  --di-group-title-size: var(--di-type-body);
  --di-group-title-tracking: normal;
  --di-group-title-case: none;
  --di-group-title-inset: var(--di-micro-gap);
  /* initial restores Radzen's density-aware font size through the bridge fallback. */
  --di-tab-label-size: initial;
  --di-tab-label-weight: normal;
  --di-tab-label-tracking: 0;
  --di-tab-label-case: none;
  --di-tab-label-min-height: 0px;
  --di-tab-nested-track-surface: var(--di-surface-sunken);
  --di-tab-nested-selected-surface: var(--di-surface-raised);
  --di-document-tab-border-width: calc(2 * var(--di-border-width)) var(--di-border-width) 0;
  --di-document-tab-radius: var(--di-radius-sm) var(--di-radius-sm) 0 0;
  --di-document-tab-selected-border: var(--di-selection-indicator) var(--di-border) var(--di-border);
  --di-document-tab-selected-surface: var(--di-surface-raised);
  --di-document-tab-selected-offset: calc(-1 * var(--di-border-width));
  --di-document-track-border-width: 0;
  --di-document-panel-border-width: var(--di-border-width);
  --di-document-panel-radius: 0 0 var(--di-radius-sm) var(--di-radius-sm);
  /* One light line for every edge: controls, commands, groups, containers and grid rows share --di-border at
     --di-border-width. Only focus is thicker (--di-focus-indicator); hover changes the fill, not the edge. */
  /* Neutral filled commands share one fill and one quiet edge in every container. */
  --di-command-surface: var(--di-surface-sunken);
  --di-command-hover-surface: var(--di-surface-hover);
  --di-command-border: var(--di-border);
  --di-command-hover-border: var(--di-border);
  /* Column titles: Standard keeps the body face at label size; a profile can give them the label voice. */
  --di-grid-heading-font: var(--di-body-font);
  --di-grid-heading-size: var(--di-type-label);
  --di-grid-heading-weight: 600;
  --di-grid-heading-case: none;
  --di-grid-heading-tracking: normal;
  --di-grid-heading-rule: var(--di-border);
  --di-grid-separator: var(--di-border);
  --di-grid-border-width: 1px;
  --di-grid-separator-width: 1px;
}



:is(.di-brand-name, .di-theme-gallery-header > strong, .di-metric-widget-title, h1, h2) {
  font-family: var(--di-display-font);
  letter-spacing: var(--di-display-tracking);
  font-stretch: var(--di-display-stretch);
}

:is(.di-record-identity-label, .di-settings-label, .di-theme-gallery-sidebar > strong) {
  font-family: var(--di-label-font);
  letter-spacing: var(--di-micro-label-tracking);
  text-transform: var(--di-micro-label-case);
}

/* Native preview selectors stay outside the sample and never alter the shell. */
.di-appearance-preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--di-gap);
  margin-bottom: var(--di-gap);
}
.di-appearance-preview-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--di-micro-gap);
  color: var(--di-text-muted);
  font-size: var(--di-type-label);
}
.di-appearance-preview-controls select {
  min-height: var(--di-control-h);
  border: var(--di-border-width) solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: var(--di-surface-raised);
  color: var(--di-text);
  font: inherit;
}
.di-appearance-preview-controls select:focus-visible {
  outline: none;
  box-shadow: var(--di-focus-ring);
}