@import url("default-palette.css");

:root {
  color-scheme: light;

  --wa-color-blue-95: #f3f3ff;
  --wa-color-blue-90: #e4e3ff;
  --wa-color-blue-80: #c4c1ff;
  --wa-color-blue-70: #a29cff;
  --wa-color-blue-60: #8277ff;
  --wa-color-blue-50: #6b5cff;
  --wa-color-blue-40: #5446dd;
  --wa-color-blue-30: #4032b7;
  --wa-color-blue-20: #2c2386;
  --wa-color-blue-10: #1b1758;
  --wa-color-blue-05: #101035;
  --wa-color-blue: var(--wa-color-blue-50);
  --wa-color-blue-on: white;

  --wa-color-brand-95: var(--wa-color-blue-95);
  --wa-color-brand-90: var(--wa-color-blue-90);
  --wa-color-brand-80: var(--wa-color-blue-80);
  --wa-color-brand-70: var(--wa-color-blue-70);
  --wa-color-brand-60: var(--wa-color-blue-60);
  --wa-color-brand-50: var(--wa-color-blue-50);
  --wa-color-brand-40: var(--wa-color-blue-40);
  --wa-color-brand-30: var(--wa-color-blue-30);
  --wa-color-brand-20: var(--wa-color-blue-20);
  --wa-color-brand-10: var(--wa-color-blue-10);
  --wa-color-brand-05: var(--wa-color-blue-05);
  --wa-color-brand: var(--wa-color-blue);
  --wa-color-brand-on: var(--wa-color-blue-on);

  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-default: #fbfbff;
  --wa-color-surface-lowered: #f3f5ff;
  --wa-color-surface-border: #e1e4f2;

  --wa-color-text-normal: #11162f;
  --wa-color-text-quiet: #5c6282;
  --wa-color-text-link: #5446dd;

  --wa-color-overlay-modal: color-mix(in srgb, #101035 54%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #6b5cff 16%, transparent);
  --wa-color-shadow: color-mix(in srgb, #11162f 12%, transparent);
  --wa-color-focus: #6b5cff;

  --wa-color-mix-hover: black 10%;
  --wa-color-mix-active: black 18%;

  --wa-color-brand-fill-quiet: #efefff;
  --wa-color-brand-fill-normal: #e4e3ff;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #dcdef4;
  --wa-color-brand-border-normal: #c1c0f4;
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: #4032b7;
  --wa-color-brand-on-normal: #2c2386;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #fbfbff;
  --wa-color-neutral-fill-normal: #f1f3fb;
  --wa-color-neutral-fill-loud: #11162f;
  --wa-color-neutral-border-quiet: #e2e4ef;
  --wa-color-neutral-border-normal: #c8ccde;
  --wa-color-neutral-border-loud: #8087a8;
  --wa-color-neutral-on-quiet: #5c6282;
  --wa-color-neutral-on-normal: #4c536d;
  --wa-color-neutral-on-loud: white;
}

:root[data-theme='dark'],
[data-theme='dark'] {
  color-scheme: dark;

  --wa-color-surface-raised: #161c3a;
  --wa-color-surface-default: #0d1130;
  --wa-color-surface-lowered: #090d24;
  --wa-color-surface-border: #313968;

  --wa-color-text-normal: #f3f5ff;
  --wa-color-text-quiet: #b8bfdf;
  --wa-color-text-link: #a29cff;

  --wa-color-overlay-modal: color-mix(in srgb, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #8277ff 18%, transparent);
  --wa-color-shadow: color-mix(in srgb, black 68%, transparent);
  --wa-color-focus: #8277ff;

  --wa-color-brand-fill-quiet: #1f2651;
  --wa-color-brand-fill-normal: #2a3170;
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: #2a3170;
  --wa-color-brand-border-normal: #4e56a6;
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: #c4c1ff;
  --wa-color-brand-on-normal: #e4e3ff;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #161c3a;
  --wa-color-neutral-fill-normal: #20284b;
  --wa-color-neutral-fill-loud: #f3f5ff;
  --wa-color-neutral-border-quiet: #2b3152;
  --wa-color-neutral-border-normal: #4a5378;
  --wa-color-neutral-border-loud: #c8ccde;
  --wa-color-neutral-on-quiet: #b8bfdf;
  --wa-color-neutral-on-normal: #d6daf0;
  --wa-color-neutral-on-loud: #11162f;
}