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

:root {
  color-scheme: light;

  --wa-color-blue-95: #fff6ee;
  --wa-color-blue-90: #ffe7d2;
  --wa-color-blue-80: #ffc995;
  --wa-color-blue-70: #ffab5d;
  --wa-color-blue-60: #ff8d2b;
  --wa-color-blue-50: #ff7a00;
  --wa-color-blue-40: #d45f00;
  --wa-color-blue-30: #a24703;
  --wa-color-blue-20: #6d3108;
  --wa-color-blue-10: #411d08;
  --wa-color-blue-05: #241005;
  --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: #fffdf9;
  --wa-color-surface-default: #f5f1eb;
  --wa-color-surface-lowered: #efe8de;
  --wa-color-surface-border: #ddd3c6;

  --wa-color-text-normal: #111111;
  --wa-color-text-quiet: #5f564c;
  --wa-color-text-link: #d45f00;

  --wa-color-overlay-modal: color-mix(in srgb, #241005 52%, transparent);
  --wa-color-overlay-inline: color-mix(in srgb, #ff7a00 14%, transparent);
  --wa-color-shadow: color-mix(in srgb, #6d3108 10%, transparent);
  --wa-color-focus: #ff8d2b;

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

  --wa-color-brand-fill-quiet: #f0e8dd;
  --wa-color-brand-fill-normal: #eadfce;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #e4d8ca;
  --wa-color-brand-border-normal: #d9c3ab;
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: #6d3108;
  --wa-color-brand-on-normal: #552708;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #f5f1eb;
  --wa-color-neutral-fill-normal: #ece4d8;
  --wa-color-neutral-fill-loud: #27221d;
  --wa-color-neutral-border-quiet: #e2d8cb;
  --wa-color-neutral-border-normal: #cfc2b1;
  --wa-color-neutral-border-loud: #857666;
  --wa-color-neutral-on-quiet: #5f564c;
  --wa-color-neutral-on-normal: #473f36;
  --wa-color-neutral-on-loud: #fffdf9;
}

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

  --wa-color-surface-raised: #231b15;
  --wa-color-surface-default: #17120e;
  --wa-color-surface-lowered: #120e0b;
  --wa-color-surface-border: #4a3321;

  --wa-color-text-normal: #f7efe6;
  --wa-color-text-quiet: #ccb8a2;
  --wa-color-text-link: #ffab5d;

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

  --wa-color-brand-fill-quiet: #3a2617;
  --wa-color-brand-fill-normal: #53361e;
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: #53361e;
  --wa-color-brand-border-normal: #7c501f;
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: #ffc995;
  --wa-color-brand-on-normal: #ffd9b4;
  --wa-color-brand-on-loud: white;

  --wa-color-neutral-fill-quiet: #231b15;
  --wa-color-neutral-fill-normal: #32271e;
  --wa-color-neutral-fill-loud: #efe8de;
  --wa-color-neutral-border-quiet: #3a2f26;
  --wa-color-neutral-border-normal: #5b493a;
  --wa-color-neutral-border-loud: #b9a48d;
  --wa-color-neutral-on-quiet: #ccb8a2;
  --wa-color-neutral-on-normal: #e1d3c3;
  --wa-color-neutral-on-loud: #111111;
}