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

/**
 * Foundational Colors and Semantic Colors
 */
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark .wa-invert {
  color-scheme: light;
  color: var(--wa-color-text-normal);

  /**
   * Foundational Colors
   */

  /* Surfaces are background layers that other content rests on.
   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
  --wa-color-surface-raised: white;
  --wa-color-surface-default: white;
  --wa-color-surface-lowered: var(--wa-color-gray-95);
  --wa-color-surface-border: var(--wa-color-gray-90);

  /* Text colors are used for standard text elements.
   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
  --wa-color-text-normal: var(--wa-color-gray-10);
  --wa-color-text-quiet: var(--wa-color-gray-40);
  --wa-color-text-link: var(--wa-color-brand-40);

  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);

  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
  --wa-color-shadow: color-mix(
    in oklab,
    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
    transparent
  );

  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
  --wa-color-focus: var(--wa-color-brand-60);

  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
  --wa-color-mix-hover: black 10%;
  --wa-color-mix-active: black 20%;

  /**
   * Semantic Colors
   * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
   * Within these groups, each color specifies a role -
   *  *  Fill for background colors or areas larger than a few pixels
   *  *  Border for borders, dividers, and other stroke-like elements
   *  *  On for content displayed on a fill with the corresponding attention
   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
   */
  --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-90);
  --wa-color-brand-border-normal: var(--wa-color-brand-80);
  --wa-color-brand-border-loud: var(--wa-color-brand-60);
  --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: 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-90);
  --wa-color-success-border-normal: var(--wa-color-green-80);
  --wa-color-success-border-loud: var(--wa-color-green-60);
  --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: 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-90);
  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
  --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: 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-90);
  --wa-color-danger-border-normal: var(--wa-color-red-80);
  --wa-color-danger-border-loud: var(--wa-color-red-60);
  --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: var(--wa-color-gray-95);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
  --wa-color-neutral-on-loud: white;
}

/** need to wrap :host-context() in an :is() selector for unsupported browsers */
.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-10);
  --wa-color-surface-default: var(--wa-color-gray-05);
  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
  --wa-color-surface-border: var(--wa-color-gray-20);

  --wa-color-text-normal: var(--wa-color-gray-95);
  --wa-color-text-quiet: var(--wa-color-gray-60);
  --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-gray-50) 10%, transparent);

  /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
  --wa-color-shadow: color-mix(
    in oklab,
    var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
    transparent
  );

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

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

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
  --wa-color-brand-fill-normal: var(--wa-color-brand-20);
  --wa-color-brand-fill-loud: var(--wa-color-brand-50-max);
  --wa-color-brand-border-quiet: var(--wa-color-brand-20);
  --wa-color-brand-border-normal: var(--wa-color-brand-30);
  --wa-color-brand-border-loud: var(--wa-color-brand-40);
  --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: var(--wa-color-green-10);
  --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: var(--wa-color-green-20);
  --wa-color-success-border-normal: var(--wa-color-green-30);
  --wa-color-success-border-loud: var(--wa-color-green-40);
  --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: var(--wa-color-yellow-10);
  --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: var(--wa-color-yellow-20);
  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
  --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: var(--wa-color-red-10);
  --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: var(--wa-color-red-20);
  --wa-color-danger-border-normal: var(--wa-color-red-30);
  --wa-color-danger-border-loud: var(--wa-color-red-40);
  --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: var(--wa-color-gray-10);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
  --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-05);
}
