:root[data-ui-density="compact"] {
  --ui-left-panel-width: 164px;
  --ui-right-panel-width: 208px;
  --ui-page-library-width: 206px;
  --ui-icon-button-size: 20px;
  --ui-header-button-size: 28px;
  --ui-header-settings-icon-size: 25px;
  --ui-header-social-icon-size: 20px;
  --ui-header-info-glyph-size: 18px;
  --ui-shell-inline-padding: 12px;
  --ui-status-inline-padding: 10px;
  --ui-sidebar-block-padding: 15px;
  --ui-sidebar-inline-padding: 12px;
  --ui-sidebar-title-gap: 19px;
  --ui-settings-panel-offset: 16px;
  --ui-settings-panel-width: 276px;
  --ui-page-library-rail-padding: 10px;
  --ui-page-library-padding-block-start: 15px;
  --ui-page-library-padding-inline-end: 11px;
  --ui-page-library-padding-block-end: 16px;
  --ui-page-library-padding-inline-start: 7px;
  --ui-tool-button-block-padding: 2px;
  --ui-control-gap-sm: 3px;
  --ui-control-gap-md: 5px;
  --ui-control-gap-lg: 6px;
  --ui-panel-section-gap: 22px;
  --ui-panel-item-gap: 7px;
  --ui-panel-row-height: 31px;
  --ui-section-content-indent: 14px;
  --ui-floating-gap: 5px;
  --header-brand-gap: 4px;
  --header-identity-gap: 7px;
  --header-action-gap: 8px;
  --header-meta-gap: 5px;
  --status-item-gap: 15px;
  --ui-field-height-sm: 25px;
  --ui-field-height-md: 26px;
  --ui-inline-name-height: 22px;
  --ui-rich-text-control-size: 22px;
  --ui-alignment-control-width: 25px;
  --ui-alignment-control-height: 23px;
  --ui-color-swatch-size: 15px;
  --ui-range-hit-height: 14px;
  --ui-range-thumb-size: 9px;
  --ui-picker-option-size: 25px;
  --ui-brand-icon-size: 16px;
  --ui-header-icon-size: 26px;
  --ui-tool-icon-size: 13px;
  --ui-panel-control-icon-size: 15px;
  --ui-library-file-icon-width: 14px;
  --ui-library-file-icon-height: 16px;
  --ui-font-size-micro: 8px;
  --ui-font-size-caption: 9px;
  --ui-font-size-control: 10px;
  --ui-font-size-body-sm: 11px;
  --ui-font-size-drag-glyph: 7px;
  --ui-font-size-brand: 13px;
  --ui-font-size-action-glyph: 14px;
  --ui-font-size-dialog-title-sm: 16px;
  --ui-font-size-dialog-close: 17px;
  --ui-font-size-dialog-title: 19px;
  --ui-font-size-immersive-close: 25px;
  --ui-value-subtle: var(--color-neutral-550);
}

:root[data-ui-density="spacious"] {
  --ui-left-panel-width: 204px;
  --ui-right-panel-width: 244px;
  --ui-page-library-width: 252px;
  --ui-icon-button-size: 26px;
  --ui-header-button-size: 34px;
  --ui-header-settings-icon-size: 30px;
  --ui-header-social-icon-size: 24px;
  --ui-header-info-glyph-size: 21px;
  --ui-shell-inline-padding: 17px;
  --ui-status-inline-padding: 15px;
  --ui-sidebar-block-padding: 22px;
  --ui-sidebar-inline-padding: 17px;
  --ui-sidebar-title-gap: 29px;
  --ui-settings-panel-offset: 24px;
  --ui-settings-panel-width: 332px;
  --ui-page-library-rail-padding: 15px;
  --ui-page-library-padding-block-start: 22px;
  --ui-page-library-padding-inline-end: 16px;
  --ui-page-library-padding-block-end: 24px;
  --ui-page-library-padding-inline-start: 10px;
  --ui-tool-button-block-padding: 6px;
  --ui-control-gap-sm: 5px;
  --ui-control-gap-md: 7px;
  --ui-control-gap-lg: 9px;
  --ui-panel-section-gap: 32px;
  --ui-panel-item-gap: 11px;
  --ui-panel-row-height: 41px;
  --ui-section-content-indent: 18px;
  --ui-floating-gap: 8px;
  --header-brand-gap: 6px;
  --header-identity-gap: 11px;
  --header-action-gap: 12px;
  --header-meta-gap: 7px;
  --status-item-gap: 22px;
  --ui-field-height-sm: 31px;
  --ui-field-height-md: 32px;
  --ui-inline-name-height: 28px;
  --ui-rich-text-control-size: 28px;
  --ui-alignment-control-width: 31px;
  --ui-alignment-control-height: 29px;
  --ui-color-swatch-size: 20px;
  --ui-range-hit-height: 19px;
  --ui-range-thumb-size: 12px;
  --ui-picker-option-size: 32px;
  --ui-brand-icon-size: 20px;
  --ui-header-icon-size: 32px;
  --ui-tool-icon-size: 16px;
  --ui-panel-control-icon-size: 18px;
  --ui-library-file-icon-width: 17px;
  --ui-library-file-icon-height: 19px;
  --ui-font-size-micro: 10px;
  --ui-font-size-caption: 11px;
  --ui-font-size-control: 12px;
  --ui-font-size-body-sm: 13px;
  --ui-font-size-drag-glyph: 9px;
  --ui-font-size-brand: 15px;
  --ui-font-size-action-glyph: 17px;
  --ui-font-size-dialog-title-sm: 18px;
  --ui-font-size-dialog-close: 20px;
  --ui-font-size-dialog-title: 23px;
  --ui-font-size-immersive-close: 29px;
}