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

:where(:root),
:host,
.wa-theme-tailspin,
.wa-light,
.wa-dark .wa-invert {
  /**
   * Foundational Colors
   */
  --wa-color-text-link: var(--wa-color-brand-40);

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

  --wa-color-focus: var(--wa-color-brand-50);

  --wa-color-mix-hover: var(--wa-color-gray-80) 20%;
  --wa-color-mix-active: var(--wa-color-gray-80) 10%;

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
  --wa-color-brand-fill-normal: var(--wa-color-brand-90);
  --wa-color-brand-fill-loud: var(--wa-color-brand-40);
  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
  --wa-color-brand-on-quiet: var(--wa-color-brand-40);
  --wa-color-brand-on-normal: var(--wa-color-brand-30);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
  --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: color-mix(in oklab, var(--wa-color-green-80), transparent);
  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70) 60%, transparent);
  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-60) 70%, transparent);
  --wa-color-success-on-quiet: var(--wa-color-green-40);
  --wa-color-success-on-normal: var(--wa-color-green-30);
  --wa-color-success-on-loud: white;

  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-95) 85%, transparent);
  --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: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70) 60%, transparent);
  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-60) 70%, transparent);
  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
  --wa-color-warning-on-loud: white;

  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-95) 85%, transparent);
  --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: color-mix(in oklab, var(--wa-color-red-80), transparent);
  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70) 60%, transparent);
  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-60) 70%, transparent);
  --wa-color-danger-on-quiet: var(--wa-color-red-40);
  --wa-color-danger-on-normal: var(--wa-color-red-30);
  --wa-color-danger-on-loud: white;

  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-95) 85%, transparent);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
  --wa-color-neutral-fill-loud: var(--wa-color-gray-10);
  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-80), transparent);
  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-70) 60%, transparent);
  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-60) 70%, transparent);
  --wa-color-neutral-on-quiet: var(--wa-color-gray-30);
  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
  --wa-color-neutral-on-loud: white;

  /**
   * Component Groups
   */
  --wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}

.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
  /**
   * Foundational Colors
   */
  --wa-color-surface-border: rgb(255 255 255 / 0.1);

  --wa-color-text-normal: white;
  --wa-color-text-quiet: var(--wa-color-gray-60);
  --wa-color-text-link: var(--wa-color-brand-70);

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

  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-mix-hover: var(--wa-color-gray-70) 20%;
  --wa-color-mix-active: var(--wa-color-gray-70) 10%;

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
  --wa-color-brand-fill-loud: var(--wa-color-brand-50);
  --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
  --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
  --wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
  --wa-color-brand-on-quiet: var(--wa-color-brand-60);
  --wa-color-brand-on-normal: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: white;

  --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);
  --wa-color-success-fill-normal: var(--wa-color-green-20);
  --wa-color-success-fill-loud: var(--wa-color-green-50);
  --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
  --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30) 60%, transparent);
  --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-40) 70%, transparent);
  --wa-color-success-on-quiet: var(--wa-color-green-60);
  --wa-color-success-on-normal: var(--wa-color-green-70);
  --wa-color-success-on-loud: white;

  --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-10) 90%, transparent);
  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
  --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
  --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30) 60%, transparent);
  --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-40) 70%, transparent);
  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
  --wa-color-warning-on-loud: white;

  --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-10) 90%, transparent);
  --wa-color-danger-fill-normal: var(--wa-color-red-20);
  --wa-color-danger-fill-loud: var(--wa-color-red-50);
  --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
  --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30) 60%, transparent);
  --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-40) 70%, transparent);
  --wa-color-danger-on-quiet: var(--wa-color-red-60);
  --wa-color-danger-on-normal: var(--wa-color-red-70);
  --wa-color-danger-on-loud: white;

  --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-10) 90%, transparent);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
  --wa-color-neutral-fill-loud: white;
  --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-20), transparent);
  --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-30) 60%, transparent);
  --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-40) 70%, transparent);
  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
  --wa-color-neutral-on-loud: var(--wa-color-gray-10);
}
