[data-color-scheme='light'] {
  --color-bg-primary: #ffffff;      /* brandbook color-bg-surface */
  --color-bg-secondary: #f9f7f4;    /* color-bg-base */
  --color-bg-tertiary: #f0ede8;     /* color-bg-subtle */
  --color-bg-inverted: #242220;     /* color-bg-inverse */
  --color-text-primary: #242220;
  --color-text-secondary: #7c7870;
  --color-text-tertiary: #7c7870;
  --color-text-inverted: #f9f7f4;   /* color-text-inverse */
  --color-text-brand: #2d4f8a;      /* color-brand (slate blue) */
  --color-bg-brand-base: #2d4f8a;
  --color-bg-brand-base-hover: #1e3668; /* color-brand-hover */
  --color-bg-brand-soft: #eef1f8;   /* color-brand-subtle */
  --color-bg-brand-softest: #eef1f8;
  --color-border-primary: #dedad3;  /* color-border */
  --color-border-brand: #2d4f8a;
  --color-text-error: #b32828;      /* color-error */
  --color-bg-error-base: #b32828;
  --color-text-warning: #d4b130;    /* color-warning */
  --color-bg-warning-base: #d4b130;
  --color-text-success: #1a8a57;    /* color-success */
  --color-bg-success-base: #1a8a57;
}

[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  --color-bg-primary: #131210;      /* brandbook color-bg-surface (dark) */
  --color-bg-secondary: #0a0908;    /* color-bg-base (dark) */
  --color-bg-tertiary: #242220;     /* color-bg-subtle (dark) */
  --color-bg-inverted: #f0ede8;     /* color-bg-inverse (dark) */
  --color-text-primary: #f0ede8;
  --color-text-secondary: #a09c94;
  --color-text-tertiary: #a09c94;
  --color-text-inverted: #131210;   /* color-text-inverse (dark) */
  --color-text-brand: #6e8cc4;      /* color-brand (slate blue, dark) */
  --color-bg-brand-base: #6e8cc4;
  --color-bg-brand-base-hover: #a2b2db; /* color-brand-hover (dark) */
  --color-bg-brand-soft: #050a1a;   /* color-brand-subtle (dark) */
  --color-bg-brand-softest: #050a1a;
  --color-border-primary: #3c3a36;  /* color-border (dark) */
  --color-border-brand: #6e8cc4;
  --color-text-error: #d94f4f;      /* color-error (dark) */
  --color-bg-error-base: #d94f4f;
  --color-text-warning: #d4b130;    /* color-warning (same both modes) */
  --color-bg-warning-base: #d4b130;
  --color-text-success: #2db87a;    /* color-success (dark) */
  --color-bg-success-base: #2db87a;
}