:root {
  color-scheme: dark;

  --color-background: #0e0a0f;
  --color-surface: #181219;
  --color-surface-raised: #211722;
  --color-border: #3b2939;
  --color-text: #f7f0f4;
  --color-text-muted: #b8a9b3;
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-active: #5b21b6;
  --color-primary-subtle: #2e1065;
  --color-on-primary: #ffffff;
  --color-focus: #a78bfa;
  --color-content-background: #f4f2f7;
  --color-form-background: #eeebf2;
  --color-content-surface: #ffffff;
  --color-content-border: #ded8e5;
  --color-content-text: #241d29;
  --color-content-text-muted: #6f6577;
  --color-content-primary-subtle: #e9e2f8;
  --color-error-background: #fce8ea;
  --color-error-border: #e8a4aa;
  --color-error-text: #8f1d2c;
  --color-danger: #b4232f;
  --color-danger-hover: #941b25;

  --content-max-width: 1152px;
  --content-padding: 16px;
}