:root {
  --c-surface-0: hsl(330 32% 10%);
  --c-surface-1: hsl(330 28% 16%);
  --c-surface-2: hsl(330 26% 22%);

  --c-border: hsl(330 24% 24%);
  --c-border-soft: hsl(330 22% 33%);
  --c-border-faint: hsl(330 28% 16%);
  --c-border-strong: hsl(330 15% 62%);

  --c-text: hsl(330 15% 94%);
  --c-text-secondary: hsl(330 12% 82%);
  --c-text-muted: hsl(330 10% 65%);
  --c-text-subtle: hsl(330 8% 50%);
  --c-text-faint: hsl(330 8% 38%);
  --c-text-faintest: hsl(330 10% 28%);

  --c-danger-bg: #450a0a;
  --c-danger-border: #7f1d1d;
  --c-danger-text: #f87171;
  --c-danger-text-strong: #fca5a5;

  --c-accent: hsl(150 70% 62%);
  --c-accent-soft: hsl(120 55% 34%);
  --c-accent-text: hsl(150 75% 80%);
  --c-accent-2: hsl(60 65% 58%);
  --c-accent-3: hsl(240 65% 68%);
}