/*
 * Standalone default theme colors based on Web Awesome's dist-cdn theme + palette.
 * Import this file in non-Web Awesome projects. It only depends on the local palette file.
 */

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

:root {
  color-scheme: light;

  --wa-color-surface-raised: white;
  --wa-color-surface-default: color-mix(in oklab, white 88%, var(--wa-color-brand-95));
  --wa-color-surface-lowered: color-mix(in oklab, white 58%, var(--wa-color-brand-95));
  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-90) 78%, var(--wa-color-brand-80));

  --wa-color-text-normal: color-mix(in oklab, var(--wa-color-neutral-10) 90%, var(--wa-color-brand-20));
  --wa-color-text-quiet: color-mix(in oklab, var(--wa-color-neutral-40) 82%, var(--wa-color-brand-30));
  --wa-color-text-link: var(--wa-color-brand-40);

  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-brand-80) 18%, transparent);
  --wa-color-shadow: color-mix(in oklab, var(--wa-color-brand-05) 12%, transparent);
  --wa-color-focus: var(--wa-color-brand-60);

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

  --wa-color-brand-fill-quiet: color-mix(in oklab, white 35%, var(--wa-color-brand-95));
  --wa-color-brand-fill-normal: color-mix(in oklab, white 20%, var(--wa-color-brand-90));
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: color-mix(in oklab, white 20%, var(--wa-color-brand-90));
  --wa-color-brand-border-normal: var(--wa-color-brand-80);
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: var(--wa-color-brand-30);
  --wa-color-brand-on-normal: var(--wa-color-brand-20);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-success-95);
  --wa-color-success-fill-normal: var(--wa-color-success-90);
  --wa-color-success-fill-loud: var(--wa-color-success-50);
  --wa-color-success-border-quiet: var(--wa-color-success-90);
  --wa-color-success-border-normal: var(--wa-color-success-80);
  --wa-color-success-border-loud: var(--wa-color-success-60);
  --wa-color-success-on-quiet: var(--wa-color-success-40);
  --wa-color-success-on-normal: var(--wa-color-success-30);
  --wa-color-success-on-loud: white;

  --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
  --wa-color-warning-fill-normal: var(--wa-color-warning-90);
  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
  --wa-color-warning-border-quiet: var(--wa-color-warning-90);
  --wa-color-warning-border-normal: var(--wa-color-warning-80);
  --wa-color-warning-border-loud: var(--wa-color-warning-60);
  --wa-color-warning-on-quiet: var(--wa-color-warning-40);
  --wa-color-warning-on-normal: var(--wa-color-warning-30);
  --wa-color-warning-on-loud: white;

  --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
  --wa-color-danger-fill-normal: var(--wa-color-danger-90);
  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
  --wa-color-danger-border-quiet: var(--wa-color-danger-90);
  --wa-color-danger-border-normal: var(--wa-color-danger-80);
  --wa-color-danger-border-loud: var(--wa-color-danger-60);
  --wa-color-danger-on-quiet: var(--wa-color-danger-40);
  --wa-color-danger-on-normal: var(--wa-color-danger-30);
  --wa-color-danger-on-loud: white;

  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
  --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
  --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
  --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
  --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
  --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
  --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-on-loud: white;
}

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

  --wa-color-surface-raised: color-mix(in oklab, var(--wa-color-neutral-10) 88%, var(--wa-color-brand-10));
  --wa-color-surface-default: color-mix(in oklab, var(--wa-color-neutral-05) 90%, var(--wa-color-brand-05));
  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-20) 78%, var(--wa-color-brand-20));

  --wa-color-text-normal: color-mix(in oklab, var(--wa-color-neutral-95) 90%, var(--wa-color-brand-90));
  --wa-color-text-quiet: color-mix(in oklab, var(--wa-color-neutral-60) 78%, var(--wa-color-brand-80));
  --wa-color-text-link: var(--wa-color-brand-70);

  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-brand-70) 12%, transparent);
  --wa-color-shadow: color-mix(in oklab, var(--wa-color-brand-05) 65%, transparent);
  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: black 8%;
  --wa-color-mix-active: black 16%;

  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: color-mix(in oklab, var(--wa-color-brand-20) 85%, black);
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20) 85%, var(--wa-color-neutral-20));
  --wa-color-brand-border-normal: var(--wa-color-brand-30);
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: var(--wa-color-brand-70);
  --wa-color-brand-on-normal: var(--wa-color-brand-80);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: var(--wa-color-success-10);
  --wa-color-success-fill-normal: var(--wa-color-success-20);
  --wa-color-success-fill-loud: var(--wa-color-success-50);
  --wa-color-success-border-quiet: var(--wa-color-success-20);
  --wa-color-success-border-normal: var(--wa-color-success-30);
  --wa-color-success-border-loud: var(--wa-color-success-40);
  --wa-color-success-on-quiet: var(--wa-color-success-60);
  --wa-color-success-on-normal: var(--wa-color-success-70);
  --wa-color-success-on-loud: white;

  --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
  --wa-color-warning-fill-normal: var(--wa-color-warning-20);
  --wa-color-warning-fill-loud: var(--wa-color-warning-50);
  --wa-color-warning-border-quiet: var(--wa-color-warning-20);
  --wa-color-warning-border-normal: var(--wa-color-warning-30);
  --wa-color-warning-border-loud: var(--wa-color-warning-40);
  --wa-color-warning-on-quiet: var(--wa-color-warning-60);
  --wa-color-warning-on-normal: var(--wa-color-warning-70);
  --wa-color-warning-on-loud: white;

  --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
  --wa-color-danger-fill-normal: var(--wa-color-danger-20);
  --wa-color-danger-fill-loud: var(--wa-color-danger-50);
  --wa-color-danger-border-quiet: var(--wa-color-danger-20);
  --wa-color-danger-border-normal: var(--wa-color-danger-30);
  --wa-color-danger-border-loud: var(--wa-color-danger-40);
  --wa-color-danger-on-quiet: var(--wa-color-danger-60);
  --wa-color-danger-on-normal: var(--wa-color-danger-70);
  --wa-color-danger-on-loud: white;

  --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
  --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
  --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
  --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
  --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
  --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
  --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
  --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
  --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
}