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

:root {
  color-scheme: light;

  --wa-color-blue-95: #f2f8ff;
  --wa-color-blue-90: #d9eef8;
  --wa-color-blue-80: #b7e1f5;
  --wa-color-blue-70: #86d0ee;
  --wa-color-blue-60: #4dbfdf;
  --wa-color-blue-50: #15b4d3;
  --wa-color-blue-40: #1192ad;
  --wa-color-blue-30: #0d6f83;
  --wa-color-blue-20: #17476d;
  --wa-color-blue-10: #10223f;
  --wa-color-blue-05: #0a1529;
  --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: #f2f8ff;
  --wa-color-surface-lowered: #e7f2fb;
  --wa-color-surface-border: #d1e2f1;

  --wa-color-text-normal: #10223f;
  --wa-color-text-quiet: #55677f;
  --wa-color-text-link: #1192ad;

  --wa-color-overlay-modal: color-mix(in srgb, #0a1529 54%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #15b4d3 14%, transparent);
  --wa-color-shadow: color-mix(in srgb, #17476d 12%, transparent);
  --wa-color-focus: #15b4d3;

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

  --wa-color-brand-fill-quiet: #e8f8fc;
  --wa-color-brand-fill-normal: #d5f1f8;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #cfe7f1;
  --wa-color-brand-border-normal: #9fd8ea;
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: #0d6f83;
  --wa-color-brand-on-normal: #10223f;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #f7fbff;
  --wa-color-neutral-fill-normal: #e9f3fb;
  --wa-color-neutral-fill-loud: #10223f;
  --wa-color-neutral-border-quiet: #d8e7f6;
  --wa-color-neutral-border-normal: #bfd3e6;
  --wa-color-neutral-border-loud: #6d7f95;
  --wa-color-neutral-on-quiet: #55677f;
  --wa-color-neutral-on-normal: #334862;
  --wa-color-neutral-on-loud: #fffdf9;
}

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

  --wa-color-surface-raised: #13243d;
  --wa-color-surface-default: #0a1529;
  --wa-color-surface-lowered: #07101f;
  --wa-color-surface-border: #274c72;

  --wa-color-text-normal: #eef7ff;
  --wa-color-text-quiet: #c2d9ea;
  --wa-color-text-link: #86d0ee;

  --wa-color-overlay-modal: color-mix(in srgb, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #15b4d3 16%, transparent);
  --wa-color-shadow: color-mix(in srgb, black 65%, transparent);
  --wa-color-focus: #4dbfdf;

  --wa-color-brand-fill-quiet: #123549;
  --wa-color-brand-fill-normal: #144a64;
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: #175069;
  --wa-color-brand-border-normal: #1d7393;
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: #b7e1f5;
  --wa-color-brand-on-normal: #d9eef8;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #13243d;
  --wa-color-neutral-fill-normal: #17304f;
  --wa-color-neutral-fill-loud: #eef7ff;
  --wa-color-neutral-border-quiet: #21405f;
  --wa-color-neutral-border-normal: #326085;
  --wa-color-neutral-border-loud: #bfd3e6;
  --wa-color-neutral-on-quiet: #c2d9ea;
  --wa-color-neutral-on-normal: #deedf8;
  --wa-color-neutral-on-loud: #111111;
}