:root {
  --canvas-spacing-xs: 4px; --canvas-spacing-sm: 8px; --canvas-spacing-md: 15px; --canvas-spacing-lg: 21px; --canvas-spacing-xl: 32px;
  --canvas-control-compact: 44px; --canvas-control-standard: 48px; --canvas-control-large: 59px;
  --canvas-radius-sm: 8px; --canvas-radius-md: 16px; --canvas-radius-lg: 24px; --canvas-radius-pill: 9999px;
  --canvas-artwork-icon: 24px; --canvas-artwork-avatar: 64px; --canvas-artwork-hero: 240px;
  --canvas-panel-compact: 280px; --canvas-panel-standard: 307px; --canvas-panel-wide: 427px;
  --canvas-typography-auxiliary: 10px; --canvas-typography-main: 15px; --canvas-typography-title: 21px; --canvas-typography-display: 32px;
}
.canvas-text-main { font-size: var(--canvas-typography-main); }
.canvas-text-auxiliary { font-size: var(--canvas-typography-auxiliary); }
.canvas-control { min-block-size: var(--canvas-control-standard); }
.canvas-panel { inline-size: min(100%, var(--canvas-panel-standard)); }
.canvas-artwork { inline-size: var(--canvas-artwork-avatar); block-size: var(--canvas-artwork-avatar); }