:root {
  --surface-border-radius-small: 4px;
  --surface-border-radius-medium: 8px;
  --surface-border-radius-large: 16px;
  --surface-border-radius-xlarge: 32px;
  --surface-border-small: 1px;
  --surface-border-medium: 2px;
  --surface-border-large: 3px;
  --surface-drop-shadow-small: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --surface-drop-shadow-medium: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  --surface-drop-shadow-large: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  --surface-drop-shadow-status-error: 0 0 0 2px color-mix(in srgb, var(--color-error-500) 20%, transparent);
  --surface-drop-shadow-status-active: 0 0 0 2px color-mix(in srgb, var(--color-primary-main) 25%, transparent);
  --surface-inner-shadow-small: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
  --surface-inner-shadow-medium: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  --surface-inner-shadow-large: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}