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

:root {
  color-scheme: light;

  --wa-color-blue-95: #f9fffe;
  --wa-color-blue-90: #e6faf5;
  --wa-color-blue-80: #c8f2ea;
  --wa-color-blue-70: #9ae8da;
  --wa-color-blue-60: #68ddca;
  --wa-color-blue-50: #45d2bc;
  --wa-color-blue-40: #2cae9b;
  --wa-color-blue-30: #22877a;
  --wa-color-blue-20: #1d5761;
  --wa-color-blue-10: #14313b;
  --wa-color-blue-05: #0d2027;
  --wa-color-blue: var(--wa-color-blue-50);
  --wa-color-blue-on: #14313b;

  --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: #f9fffe;
  --wa-color-surface-lowered: #f1fcf9;
  --wa-color-surface-border: #d6ece7;

  --wa-color-text-normal: #14313b;
  --wa-color-text-quiet: #57717a;
  --wa-color-text-link: #22877a;

  --wa-color-overlay-modal: color-mix(in srgb, #0d2027 54%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #45d2bc 14%, transparent);
  --wa-color-shadow: color-mix(in srgb, #1d5761 12%, transparent);
  --wa-color-focus: #45d2bc;

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

  --wa-color-brand-fill-quiet: #e9fbf7;
  --wa-color-brand-fill-normal: #d3f6ef;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #cfeae4;
  --wa-color-brand-border-normal: #98e2d5;
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: #22877a;
  --wa-color-brand-on-normal: #14313b;
  --wa-color-brand-on-loud: #14313b;

  --wa-color-neutral-fill-quiet: #fbfffe;
  --wa-color-neutral-fill-normal: #edf8f6;
  --wa-color-neutral-fill-loud: #14313b;
  --wa-color-neutral-border-quiet: #d7ece7;
  --wa-color-neutral-border-normal: #bfded8;
  --wa-color-neutral-border-loud: #6e898e;
  --wa-color-neutral-on-quiet: #57717a;
  --wa-color-neutral-on-normal: #37505b;
  --wa-color-neutral-on-loud: #fffdf9;
}

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

  --wa-color-surface-raised: #17353e;
  --wa-color-surface-default: #0d2027;
  --wa-color-surface-lowered: #09171c;
  --wa-color-surface-border: #28545a;

  --wa-color-text-normal: #eefbf8;
  --wa-color-text-quiet: #c7e5df;
  --wa-color-text-link: #9ae8da;

  --wa-color-overlay-modal: color-mix(in srgb, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #45d2bc 16%, transparent);
  --wa-color-shadow: color-mix(in srgb, black 65%, transparent);
  --wa-color-focus: #68ddca;

  --wa-color-brand-fill-quiet: #1c4b4c;
  --wa-color-brand-fill-normal: #21625f;
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: #2b6663;
  --wa-color-brand-border-normal: #2cae9b;
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: #c8f2ea;
  --wa-color-brand-on-normal: #e6faf5;
  --wa-color-brand-on-loud: #14313b;

  --wa-color-neutral-fill-quiet: #17353e;
  --wa-color-neutral-fill-normal: #1e4650;
  --wa-color-neutral-fill-loud: #eefbf8;
  --wa-color-neutral-border-quiet: #2d5b62;
  --wa-color-neutral-border-normal: #3f7881;
  --wa-color-neutral-border-loud: #bfded8;
  --wa-color-neutral-on-quiet: #c7e5df;
  --wa-color-neutral-on-normal: #e1f4ef;
  --wa-color-neutral-on-loud: #111111;
}