/* Override the default orange accent with purple across all themes. */
:root {
  --color-primary: #7e22ce;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #7e22ce;
  --color-primary-dark-2: #6b21a8;
  --color-primary-dark-3: #6b21a8;
  --color-primary-dark-4: #581c87;
  --color-primary-dark-5: #581c87;
  --color-primary-dark-6: #581c87;
  --color-primary-dark-7: #581c87;
  --color-primary-light-1: #9333ea;
  --color-primary-light-2: #a855f7;
  --color-primary-light-3: #c084fc;
  --color-primary-light-4: #d8b4fe;
  --color-primary-light-5: #e9d5ff;
  --color-primary-light-6: #f3e8ff;
  --color-primary-light-7: #faf5ff;
  --color-primary-alpha-10: #7e22ce19;
  --color-primary-alpha-20: #7e22ce33;
  --color-primary-alpha-30: #7e22ce4b;
  --color-primary-alpha-40: #7e22ce66;
  --color-primary-alpha-50: #7e22ce80;
  --color-primary-alpha-60: #7e22ce99;
  --color-primary-alpha-70: #7e22ceb3;
  --color-primary-alpha-80: #7e22cecc;
  --color-primary-alpha-90: #7e22cee1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);
  --color-accent: var(--color-primary-light-1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #c084fc;
    --color-primary-contrast: #000000;
    --color-primary-dark-1: #d8b4fe;
    --color-primary-dark-2: #d8b4fe;
    --color-primary-dark-3: #e9d5ff;
    --color-primary-dark-4: #e9d5ff;
    --color-primary-dark-5: #f3e8ff;
    --color-primary-dark-6: #f3e8ff;
    --color-primary-dark-7: #faf5ff;
    --color-primary-light-1: #a855f7;
    --color-primary-light-2: #9333ea;
    --color-primary-light-3: #7e22ce;
    --color-primary-light-4: #6b21a8;
    --color-primary-light-5: #6b21a8;
    --color-primary-light-6: #581c87;
    --color-primary-light-7: #581c87;
    --color-primary-alpha-10: #9333ea19;
    --color-primary-alpha-20: #9333ea33;
    --color-primary-alpha-30: #9333ea4b;
    --color-primary-alpha-40: #9333ea66;
    --color-primary-alpha-50: #9333ea80;
    --color-primary-alpha-60: #9333ea99;
    --color-primary-alpha-70: #9333eab3;
    --color-primary-alpha-80: #9333eacc;
    --color-primary-alpha-90: #9333eae1;
    --color-primary-hover: var(--color-primary-light-1);
    --color-primary-active: var(--color-primary-light-4);
    --color-accent: var(--color-primary-light-1);
  }
}