/* GENERATED by scripts/generate_density_tokens.py from core/ui_density.py. Do not edit by hand. */
/* Interface density tokens (rebrand PR B, docs/brand/INTERFACE_DENSITY.md).
   The boot script in index.html sets html[data-density] before the first stylesheet loads.
   Comfortable is the approved geometry; density.css maps Balanced and Compact onto the surfaces. */

:root,
html[data-density="comfortable"] {
  --mh-density-ratio: 1;
  --mh-density-space-1: 4px;
  --mh-density-space-2: 8px;
  --mh-density-space-3: 12px;
  --mh-density-space-4: 16px;
  --mh-density-space-5: 20px;
  --mh-density-space-6: 24px;
  --mh-density-space-7: 32px;
  --mh-density-page-gutter: 16px;
  --mh-density-page-top: 8px;
  --mh-density-section-gap: 20px;
  --mh-density-stack-gap: 10px;
  --mh-density-list-gap: 10px;
  --mh-density-card-pad-y: 16px;
  --mh-density-card-pad-x: 14px;
  --mh-density-list-card-pad-y: 12px;
  --mh-density-card-gap: 10px;
  --mh-density-inline-gap: 6px;
  --mh-density-tag-pad-y: 4px;
  --mh-density-row-pad-y: 10px;
  --mh-density-header-pad-y: 2px;
  --mh-density-segment-pad: 4px;
  --mh-density-radius-card: 17px;
  --mh-density-control-h: 54px;
  --mh-density-nav-h: 56px;
  --mh-density-nav-item-h: 46px;
  --mh-density-icon: 21px;
  --mh-density-nav-icon: 20px;
  --mh-density-tile: 46px;
  --mh-density-brand-mark: 36px;
  --mh-density-leading-body: 1.45;
  --mh-density-leading-title: 1.22;
}

html[data-density="compact"] {
  --mh-density-ratio: 0.75;
  --mh-density-space-1: 3px;
  --mh-density-space-2: 6px;
  --mh-density-space-3: 9px;
  --mh-density-space-4: 12px;
  --mh-density-space-5: 15px;
  --mh-density-space-6: 18px;
  --mh-density-space-7: 24px;
  --mh-density-page-gutter: 12px;
  --mh-density-page-top: 6px;
  --mh-density-section-gap: 15px;
  --mh-density-stack-gap: 8px;
  --mh-density-list-gap: 8px;
  --mh-density-card-pad-y: 12px;
  --mh-density-card-pad-x: 11px;
  --mh-density-list-card-pad-y: 9px;
  --mh-density-card-gap: 8px;
  --mh-density-inline-gap: 5px;
  --mh-density-tag-pad-y: 3px;
  --mh-density-row-pad-y: 8px;
  --mh-density-header-pad-y: 2px;
  --mh-density-segment-pad: 3px;
  --mh-density-radius-card: 13px;
  --mh-density-control-h: 44px;
  --mh-density-nav-h: 48px;
  --mh-density-nav-item-h: 44px;
  --mh-density-icon: 18px;
  --mh-density-nav-icon: 18px;
  --mh-density-tile: 40px;
  --mh-density-brand-mark: 32px;
  --mh-density-leading-body: 1.34;
  --mh-density-leading-title: 1.17;
}

html[data-density="balanced"] {
  --mh-density-ratio: 0.9;
  --mh-density-space-1: 4px;
  --mh-density-space-2: 7px;
  --mh-density-space-3: 11px;
  --mh-density-space-4: 14px;
  --mh-density-space-5: 18px;
  --mh-density-space-6: 22px;
  --mh-density-space-7: 29px;
  --mh-density-page-gutter: 14px;
  --mh-density-page-top: 7px;
  --mh-density-section-gap: 18px;
  --mh-density-stack-gap: 9px;
  --mh-density-list-gap: 9px;
  --mh-density-card-pad-y: 14px;
  --mh-density-card-pad-x: 13px;
  --mh-density-list-card-pad-y: 11px;
  --mh-density-card-gap: 9px;
  --mh-density-inline-gap: 5px;
  --mh-density-tag-pad-y: 4px;
  --mh-density-row-pad-y: 9px;
  --mh-density-header-pad-y: 2px;
  --mh-density-segment-pad: 4px;
  --mh-density-radius-card: 15px;
  --mh-density-control-h: 49px;
  --mh-density-nav-h: 50px;
  --mh-density-nav-item-h: 44px;
  --mh-density-icon: 20px;
  --mh-density-nav-icon: 19px;
  --mh-density-tile: 44px;
  --mh-density-brand-mark: 34px;
  --mh-density-leading-body: 1.41;
  --mh-density-leading-title: 1.2;
}