:root {
  --surface-primary: #161618;
  --surface-secondary: #161618;
  --border-primary: #222225;
  --text-primary: #ededed;
  --accent-primary: #7da9ff;
  --accent-secondary: #a1d48a;
  --accent-dark: color-mix(in srgb, var(--accent-primary) 20%, transparent);
  --link-primary: var(--accent-primary);
  --elevation-primary: 0 5px 10px 0 rgba(0, 0, 0, 0.3);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  --body-sm: 14px;
  --body-md: 16px;
  --body-lg: 20px;
  --body-xl: 40px;
  --body-3xl: 64px;
}