@import url('../../color/default.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');

:where(:root),
:host,
.wa-theme-brutalist,
.wa-light,
.wa-dark .wa-invert {
  /**
   * Foundational Colors
   */
  --wa-color-surface-border: var(--wa-color-gray-10);

  --wa-color-text-link: var(--wa-color-gray-40);

  --wa-color-shadow: rgb(0 0 0 / 0.2);

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

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
  --wa-color-brand-border-quiet: var(--wa-color-brand-80);
  --wa-color-brand-border-normal: var(--wa-color-brand-60);
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
  --wa-color-brand-on-normal: var(--wa-color-brand-40);
  --wa-color-brand-on-loud: white;

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

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

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

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

.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
  color-scheme: dark;
  color: var(--wa-color-text-normal);

  /**
   * Foundational Colors
   */
  --wa-color-surface-raised: var(--wa-color-gray-05);
  --wa-color-surface-default: var(--wa-color-gray-10);
  --wa-color-surface-lowered: var(--wa-color-gray-05);
  --wa-color-surface-border: var(--wa-color-gray-40);

  --wa-color-text-link: var(--wa-color-gray-70);

  --wa-color-shadow: rgb(0 0 0 / 0.5);

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-20);
  --wa-color-brand-fill-normal: var(--wa-color-brand-30);
  --wa-color-brand-fill-loud: var(--wa-color-brand-70-min);
  --wa-color-brand-border-quiet: var(--wa-color-brand-30);
  --wa-color-brand-border-normal: var(--wa-color-brand-40);
  --wa-color-brand-border-loud: var(--wa-color-brand-80);
  --wa-color-brand-on-quiet: var(--wa-color-brand-80);
  --wa-color-brand-on-normal: var(--wa-color-brand-95);
  --wa-color-brand-on-loud: var(--wa-color-brand-10);

  --wa-color-success-fill-quiet: var(--wa-color-green-20);
  --wa-color-success-fill-normal: var(--wa-color-green-30);
  --wa-color-success-fill-loud: var(--wa-color-green-70);
  --wa-color-success-border-quiet: var(--wa-color-green-30);
  --wa-color-success-border-normal: var(--wa-color-green-40);
  --wa-color-success-border-loud: var(--wa-color-green-80);
  --wa-color-success-on-quiet: var(--wa-color-green-80);
  --wa-color-success-on-normal: var(--wa-color-green-95);
  --wa-color-success-on-loud: var(--wa-color-green-10);

  --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
  --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
  --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
  --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
  --wa-color-warning-border-normal: var(--wa-color-yellow-40);
  --wa-color-warning-border-loud: var(--wa-color-yellow-80);
  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
  --wa-color-warning-on-normal: var(--wa-color-yellow-95);
  --wa-color-warning-on-loud: var(--wa-color-yellow-10);

  --wa-color-danger-fill-quiet: var(--wa-color-red-20);
  --wa-color-danger-fill-normal: var(--wa-color-red-30);
  --wa-color-danger-fill-loud: var(--wa-color-red-70);
  --wa-color-danger-border-quiet: var(--wa-color-red-30);
  --wa-color-danger-border-normal: var(--wa-color-red-40);
  --wa-color-danger-border-loud: var(--wa-color-red-80);
  --wa-color-danger-on-quiet: var(--wa-color-red-80);
  --wa-color-danger-on-normal: var(--wa-color-red-95);
  --wa-color-danger-on-loud: var(--wa-color-red-10);

  --wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-30);
  --wa-color-neutral-fill-loud: var(--wa-color-gray-70);
  --wa-color-neutral-border-quiet: var(--wa-color-gray-50);
  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
  --wa-color-neutral-border-loud: var(--wa-color-gray-90);
  --wa-color-neutral-on-quiet: var(--wa-color-gray-80);
  --wa-color-neutral-on-normal: var(--wa-color-gray-95);
  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
}
