:root {

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --rail-width: 240px;
  --rail-collapsed: 64px;

  --railnav-item-font-size: 12px;
  --railnav-group-font-size: 10px;
  --railnav-audience-font-size: 6px;
  --railnav-icon-size: 20px;
  --railnav-chevron-size: 18px;

  --railnav-mark-size: 26px;
  --railnav-mark-font-size: 12px;
  --railnav-switcher-menu-width: calc(var(--rail-width) - 2 * var(--shell-metric-space-4));
  --shell-metric-space-0-5: 2px;
  --shell-metric-space-1: 4px;
  --shell-metric-space-1-5: 6px;
  --shell-metric-space-2: 8px;
  --shell-metric-space-3: 12px;
  --shell-metric-space-4: 16px;
  --shell-metric-space-5: 20px;
  --shell-metric-space-6: 24px;
  --shell-metric-space-8: 32px;
  --shell-metric-space-10: 40px;
  --shell-metric-space-12: 48px;
  --shell-metric-text-xs: 12px;
  --shell-metric-text-sm: 14px;
  --shell-metric-text-base: 16px;
  --shell-metric-text-lg: 18px;
  --shell-metric-radius-sm: 4px;
  --shell-metric-radius-md: 6px;
  --shell-metric-radius-lg: 8px;
  --shell-metric-radius-xl: 12px;

  --brandplate-logo-vh-budget: 12vh;
  --crown-height: 56px;
  --crown-height-collapsed: 40px;
  --crown-logo-height: 36px;
  --participation-footer-height: 64px;
  --content-max-width: 960px;
  --feed-max-width: 37.5rem;
  --stage-max-width: 1280px;
  --participation-max-width: var(--content-max-width);
  --field-max-width-compact: 24rem;
  --toolbar-search-min-width: 16rem;
  --toolbar-search-max-width: 40rem;
  --tap-target: 36px;

}

@media (max-width: 767px) {
  :root { --crown-height: 48px; }
}

@media (hover: none) {
  :root { --tap-target: 44px; }
}
:root[data-device="phone"] { --tap-target: 44px; }

[data-theme] {
  --chart-theme-1: var(--brand-800);
  --chart-theme-2: var(--brand-500);
  --chart-theme-3: var(--brand-300);
  --chart-theme-4: var(--brand-700);
  --chart-theme-5: var(--brand-400);
  --chart-theme-6: var(--brand-600);
  --chart-theme-7: var(--brand-200);
  --chart-theme-8: var(--brand-900);
  --chart-grid:      rgba(15, 23, 42, 0.06);
  --chart-plot-bg:   var(--brand-50);
  --chart-heat-from: var(--brand-100);
  --chart-heat-to:   var(--brand-900);
}