:root {
  --sa-bg: #000;
  --sa-surface: #fff;
  --sa-container: #f3f3f3;
  --sa-accent: #bbdde2;
  --sa-text: #151515;
  --sa-muted: #636363;
  --sa-line: #e5e5e5;
  --sa-font-display: 'Inter Tight', sans-serif;
  --sa-font-body: 'Onest', sans-serif;
  --sa-radius-sm: 16px;
  --sa-radius-md: 24px;
  --sa-radius-lg: 32px;
  --sa-radius-xl: 48px;
  --sa-radius-full: 999px;
  --sa-error: #ad2d2d;
  --sa-space-0: 0px;
  --sa-error-container: #fff1f1;
  --sa-focus: #267480;
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-6: 24px;
  --sa-space-8: 32px;
  --sa-space-12: 48px;
  --sa-motion: 180ms cubic-bezier(.2, 0, 0, 1);
  --sa-shadow: 0 16px 48px #0000000d;
  /* Legacy names remain aliases, so earlier component examples use the same palette. */
  --md-primary: var(--sa-text);
  --md-on-primary: var(--sa-surface);
  --md-primary-container: var(--sa-accent);
  --md-on-primary-container: var(--sa-text);
  --md-surface: var(--sa-surface);
  --md-background: var(--sa-container);
  --md-surface-container: var(--sa-container);
  --md-surface-high: #e8e8e8;
  --md-on-surface: var(--sa-text);
  --md-on-surface-variant: var(--sa-muted);
  --md-outline: #a5a5a5;
  --md-outline-variant: var(--sa-line);
  --md-error: var(--sa-error);
  --md-font: var(--sa-font-body);
  --md-radius-sm: var(--sa-radius-sm);
  --md-radius-md: var(--sa-radius-md);
  --md-radius-lg: var(--sa-radius-lg);
  --md-radius-full: var(--sa-radius-full);
  --md-shadow: var(--sa-shadow);
  --md-motion: var(--sa-motion);
}