templates/data-app/base/src/foundation.css

:root {
  --spacing: 0.25rem;
  --space-1: var(--spacing);
  --space-2: calc(var(--spacing) * 2);
  --space-3: calc(var(--spacing) * 3);
  --space-4: calc(var(--spacing) * 4);
  --space-5: calc(var(--spacing) * 5);
  --space-6: calc(var(--spacing) * 6);
  --data-card-gap: 20px;
  --data-metric-gap: 12px;
  --data-section-gap: 40px;
  --data-section-content-gap: 20px;
  --data-after-metrics-gap: 32px;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 8%);
  --shadow-lg: 0 4px 8px -2px rgb(0 0 0 / 10%);
  --shadow-xl: 0 8px 16px -4px rgb(0 0 0 / 12%);
  --shadow-2xl: 0 16px 32px -8px rgb(0 0 0 / 19%);
  --shadow-hairline: 0 0 0 0.5px color-mix(in srgb, var(--text) 14%, transparent);
  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --text-sm-size: 14px;
  --text-sm-line: 20px;
  --text-md-size: 16px;
  --text-md-line: 24px;
  --text-lg-size: 18px;
  --text-lg-line: 28px;
  --text-xl-size: 20px;
  --text-xl-line: 28px;
  --text-title-2-tracking: normal;
  --text-title-3-tracking: normal;
  --text-large-title-tracking: normal;
  --inverse-surface: var(--color-background-primary-solid, #111);
  --inverse-surface-hover: var(--color-background-primary-solid-hover, #000);
  --inverse-text: var(--color-text-primary-solid, #fff);
  --danger-surface: var(--color-background-danger-solid, var(--negative));
  --danger-text: var(--color-text-danger-solid, #fff);
  --radius-small: var(--radius-md, 8px);
  --layer-header: 30;
  --layer-tooltip: 50;
  --tooltip-delay: 600ms;
  --layer-drag: 1000;
  --layer-tooltip-portal: 1100;
  --motion-duration-fast: 150ms;
  --motion-duration-standard: 300ms;
  --motion-duration-segmented: 300ms;
  --motion-easing-emphasized: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-easing-segmented: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-easing-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --block-drag-activation-distance: 6;
  --block-drag-lift: -5px;
  --block-drag-scale: 1.015;
  --block-drag-preview-opacity: .97;
  --block-drag-source-opacity: .24;
  --block-drag-max-tilt: 1.5;
  --block-drag-velocity-smoothing: .18;
  --block-drag-direction-dead-zone: .04;
  --block-drag-rotation-duration: 100ms;
  --block-drag-reorder-duration: 220ms;
  --block-drag-drop-duration: 220ms;
  --block-drag-reorder-easing: var(--motion-easing-emphasized);
  --block-drag-insertion-hysteresis: 10;
  --block-drag-scroll-edge: 56;
  --block-drag-scroll-speed: 18;
  --block-layout-min-metric-span: 2;
  --block-layout-min-chart-span: 3;
  --block-layout-min-custom-span: 3;
  --block-layout-min-table-span: 3;
  --block-layout-min-block-span: 3;
  --block-layout-max-row-items: 6;
  --block-layout-row-insertion-zone: 40;
  --block-layout-row-attraction: 8;
  --block-layout-row-hover-delay: 450ms;
  --block-layout-touch-row-hover-delay: 650ms;
  --block-layout-row-gap: 0px;
  --block-layout-auto-resize: 1;
  --dashboard-frosted-background: color-mix(in srgb, var(--background) 95%, transparent);
  --dashboard-frosted-blur: 14px;
  --data-app-dashboard-content-width: 1440px;
  --data-app-dashboard-wide-content-width: var(--data-app-dashboard-content-width);
  --data-app-report-evidence-width: 748px;
  --data-app-report-prose-width: 748px;
  --data-app-dashboard-gutter: 32px;
  --data-app-report-gutter: 36px;
  --data-app-dashboard-mobile-gutter: 16px;
  --data-app-report-mobile-gutter: 20px;
  --report-comparison-fill: light-dark(#d4d4d4, #929292);
  --dashboard-content-max-width: calc(var(--data-app-dashboard-content-width) + 2 * var(--data-app-dashboard-gutter));
  --dashboard-content-gutter: var(--data-app-dashboard-gutter);
  --dashboard-content-mobile-gutter: var(--data-app-dashboard-mobile-gutter);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}