Color System Generator

:root {
  --brand-primary-50: #f4f4ff;
  --brand-primary-100: #e9e9ff;
  --brand-primary-200: #d3d2ff;
  --brand-primary-300: #b8b4ff;
  --brand-primary-400: #9b90ff;
  --brand-primary-500: #8167ff;
  --brand-primary-600: #6946e4;
  --brand-primary-700: #522abe;
  --brand-primary-800: #3c0c97;
  --brand-primary-900: #28006d;
  --brand-primary-950: #19004c;
  --brand-accent-1-50: #f8f7dc;
  --brand-accent-1-100: #efeec5;
  --brand-accent-1-200: #dddc9e;
  --brand-accent-1-300: #c6c270;
  --brand-accent-1-400: #aba642;
  --brand-accent-1-500: #908a11;
  --brand-accent-1-600: #746f00;
  --brand-accent-1-700: #595500;
  --brand-accent-1-800: #403d00;
  --brand-accent-1-900: #2a2800;
  --brand-accent-1-950: #1b1900;
  --brand-neutral-50: #f5f5f7;
  --brand-neutral-100: #ebebee;
  --brand-neutral-200: #d7d7dc;
  --brand-neutral-300: #bdbdc4;
  --brand-neutral-400: #a1a1a8;
  --brand-neutral-500: #85858d;
  --brand-neutral-600: #6b6b72;
  --brand-neutral-700: #525259;
  --brand-neutral-800: #3a3a40;
  --brand-neutral-900: #26262b;
  --brand-neutral-950: #18181c;

  --brand-background: #ffffff;
  --brand-surface: #f5f5f7;
  --brand-surface-raised: #ebebee;
  --brand-border: #d7d7dc;
  --brand-text: #18181c;
  --brand-text-muted: #525259;
  --brand-primary: #6946e4;
  --brand-on-primary: #ffffff;
  --brand-accent-1: #746f00;
  --brand-on-accent-1: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-background: #0d0d0d;
    --brand-surface: #151516;
    --brand-surface-raised: #1d1c1e;
    --brand-border: #2d2d30;
    --brand-text: #e9e9ee;
    --brand-text-muted: #e1e1e8;
    --brand-primary: #7b69e5;
    --brand-on-primary: #cecece;
    --brand-accent-1: #817e39;
    --brand-on-accent-1: #cecece;
  }
}