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

:root {
  color-scheme: light;

  --wa-color-blue-95: #faf6ef;
  --wa-color-blue-90: #efe4d4;
  --wa-color-blue-80: #e1ccb1;
  --wa-color-blue-70: #cdb08b;
  --wa-color-blue-60: #b68c5d;
  --wa-color-blue-50: #8a5d2f;
  --wa-color-blue-40: #6f4725;
  --wa-color-blue-30: #56371d;
  --wa-color-blue-20: #2d3748;
  --wa-color-blue-10: #17233a;
  --wa-color-blue-05: #0f1727;
  --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: #f6f0e6;
  --wa-color-surface-lowered: #efe4d4;
  --wa-color-surface-border: #d8cdbb;

  --wa-color-text-normal: #17233a;
  --wa-color-text-quiet: #586272;
  --wa-color-text-link: #6f4725;

  --wa-color-overlay-modal: color-mix(in srgb, #0f1727 54%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #8a5d2f 14%, transparent);
  --wa-color-shadow: color-mix(in srgb, #17233a 12%, transparent);
  --wa-color-focus: #8a5d2f;

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

  --wa-color-brand-fill-quiet: #f6eee2;
  --wa-color-brand-fill-normal: #e8d6bd;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #d8cdbb;
  --wa-color-brand-border-normal: #cdb08b;
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: #56371d;
  --wa-color-brand-on-normal: #17233a;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #fbf7f1;
  --wa-color-neutral-fill-normal: #f1e4d2;
  --wa-color-neutral-fill-loud: #17233a;
  --wa-color-neutral-border-quiet: #e0d5c7;
  --wa-color-neutral-border-normal: #cdbda8;
  --wa-color-neutral-border-loud: #6d7687;
  --wa-color-neutral-on-quiet: #586272;
  --wa-color-neutral-on-normal: #374355;
  --wa-color-neutral-on-loud: #fffdf9;
}

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

  --wa-color-surface-raised: #1a2538;
  --wa-color-surface-default: #0f1727;
  --wa-color-surface-lowered: #0b1220;
  --wa-color-surface-border: #39465d;

  --wa-color-text-normal: #f9f3ea;
  --wa-color-text-quiet: #dfcfbb;
  --wa-color-text-link: #e1ccb1;

  --wa-color-overlay-modal: color-mix(in srgb, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #8a5d2f 16%, transparent);
  --wa-color-shadow: color-mix(in srgb, black 65%, transparent);
  --wa-color-focus: #cdb08b;

  --wa-color-brand-fill-quiet: #33271f;
  --wa-color-brand-fill-normal: #4b3423;
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: #5f452e;
  --wa-color-brand-border-normal: #8a5d2f;
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: #f1e4d2;
  --wa-color-brand-on-normal: #faf6ef;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #1a2538;
  --wa-color-neutral-fill-normal: #243146;
  --wa-color-neutral-fill-loud: #f9f3ea;
  --wa-color-neutral-border-quiet: #344055;
  --wa-color-neutral-border-normal: #596274;
  --wa-color-neutral-border-loud: #d8cdbb;
  --wa-color-neutral-on-quiet: #dfcfbb;
  --wa-color-neutral-on-normal: #f0e7db;
  --wa-color-neutral-on-loud: #111111;
}