:root {
  --brand-primary: #400054;
  --brand-primary-dark: #270033;
  --brand-primary-darker: #020003;
  --brand-secondary: #ffd000;
  --brand-primary-rgb: 64, 0, 84;
  --bs-primary: #400054;
  --bs-primary-rgb: 64, 0, 84;
}

:root,
:root[data-theme="dark"] {
  --color-accent-primary: 202 137 224;
  --color-accent-primary-hover: 229 181 246;
  --color-accent-secondary: 255 208 0;
  --color-accent-primary-soft: 54 30 64;
  --color-accent-secondary-soft: 75 62 18;
  --color-focus-ring: 218 160 238;
  --color-state-selected: 54 30 64;
  --color-state-active: 75 42 89;
  --color-nav-active: 202 137 224;
  --accent-gradient:
    linear-gradient(
      135deg,
      rgb(var(--color-accent-primary)) 0%,
      rgb(var(--color-accent-primary-hover)) 100%
    );
}

:root[data-theme="light"] {
  --color-accent-primary: 64 0 84;
  --color-accent-primary-hover: 39 0 51;
  --color-accent-secondary: 255 208 0;
  --color-accent-primary-soft: 242 232 247;
  --color-accent-secondary-soft: 255 248 209;
  --color-focus-ring: 126 65 151;
  --color-state-selected: 242 232 247;
  --color-state-active: 226 208 235;
  --color-nav-active: 64 0 84;
}