

:root {

  --space-page-x: var(--space-6);
  --space-page-y: var(--space-6);
  --space-section: var(--space-4);

  --space-section-band: var(--space-20);
  --space-section-hero: var(--space-24);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-stack-xl: var(--space-10);
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-lg: var(--space-4);

  --space-inline-xl: var(--space-6);

  --overlay-z-index: 50;

  --sticky-z-index: 20;

  --master-detail-rail-compact: 18.75rem;
  --master-detail-rail-narrow: 12rem;
  --master-detail-rail-wide: 24rem;
  --master-detail-rail-standard: 20rem;
  --master-detail-gap: var(--space-stack-md);

  --master-detail-collapse-below: 40rem;

  --master-detail-master-viewport-compact: 20rem;
  --master-detail-master-viewport-standard: 28rem;

  --master-detail-master-viewport-inset: var(--space-1);

  --space-page-active-x: var(--space-page-x);
  --space-page-active-y: var(--space-page-y);
  --space-section-active: var(--space-section);
  --space-page-compact-x: var(--space-4);
  --space-page-compact-y: var(--space-4);
  --space-section-compact: var(--space-4);

  --overlay-background: rgb(0 0 0 / 0.5);

  --surface-recessed: hsl(var(--muted) / 0.4);

  --page-footer-pad-block-end: var(--space-stack-md);
  --page-header-divider: none;

  --page-toolbar-background: transparent;
  --page-toolbar-pad-block: 0px;
  --page-toolbar-divider: initial;

  --page-footer-divider: initial;

  --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));

  --page-header-extra-measure: 11rem;

  --page-header-status-gap: var(--space-inline-sm);

  --page-title-placeholder-measure: 14rem;
  --page-title-placeholder-block-size: 1.5em;
  --page-subtitle-placeholder-measure: 22rem;
  --page-subtitle-placeholder-block-size: 1.25em;

  --page-measure-narrow: 42rem;
  --page-measure-medium: 48rem;

  --page-measure-wide: 72rem;

  --page-title-font-size: var(
    --heading-h1,
    calc(
      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
        var(--font-size-ratio)
    )
  );
  --page-title-font-size-compact: var(
    --heading-h2,
    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
  );
  --page-subtitle-font-size: var(--font-size-base);
  --page-subtitle-font-size-compact: var(--font-size-sm, var(--font-size-base));

  --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));

  --page-subtitle-font-size-chrome: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );

  --page-pad-block-start-chrome: 0px;

  --page-header-min-block-size-chrome: auto;

  --space-chrome-x: var(--space-6);
  --space-chrome-y: var(--space-4);
  --space-chrome-gap: var(--space-stack-sm);

  --field-label-gap: var(--space-2);
}

.dark,
:root[data-theme="dark"] {
  --surface-recessed: hsl(var(--background));
}

:root {
  --admin-collection-control-height: var(--control-height-default);
  --admin-collection-section-gap: var(--space-stack-md);
  --admin-collection-toolbar-padding-y: 0px;
  --admin-collection-search-measure: 20rem;
  --admin-collection-table-row-height: var(--table-row-height-default);
  --admin-collection-table-cell-padding-y: var(--space-1);
}
