@layer wa-native, site-base, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides, site;

/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}



/* Required utilities */
@layer wa-utilities {
  .wa-size-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-size-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-size-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-size-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-size-xl {
    font-size: var(--wa-font-size-xl);
  }
}

@layer wa-utilities {
  :where(:root),
  .wa-neutral,
  .wa-invert {
    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
  }

  .wa-brand {
    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
    --wa-color-border-loud: var(--wa-color-brand-border-loud);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-on-loud);
    --wa-color-on-normal: var(--wa-color-brand-on-normal);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
  }

  .wa-success {
    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
    --wa-color-border-loud: var(--wa-color-success-border-loud);
    --wa-color-border-normal: var(--wa-color-success-border-normal);
    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
    --wa-color-on-loud: var(--wa-color-success-on-loud);
    --wa-color-on-normal: var(--wa-color-success-on-normal);
    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
  }

  .wa-warning {
    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
    --wa-color-border-loud: var(--wa-color-warning-border-loud);
    --wa-color-border-normal: var(--wa-color-warning-border-normal);
    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
    --wa-color-on-loud: var(--wa-color-warning-on-loud);
    --wa-color-on-normal: var(--wa-color-warning-on-normal);
    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
  }

  .wa-danger {
    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
    --wa-color-border-loud: var(--wa-color-danger-border-loud);
    --wa-color-border-normal: var(--wa-color-danger-border-normal);
    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
    --wa-color-on-loud: var(--wa-color-danger-on-loud);
    --wa-color-on-normal: var(--wa-color-danger-on-normal);
    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
  }
}


@layer wa-native {
  /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    tab-size: 4;

    background-color: var(--wa-color-surface-default);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }
  /* #endregion */

  /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
  address,
  audio,
  blockquote,
  dd,
  details,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  iframe,
  ol,
  p,
  pre,
  table,
  ul,
  video {
    margin: 0;

    &:has(+ *) {
      margin-block-end: var(--wa-content-spacing);
    }
  }
  /* #endregion */

  /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--wa-font-size-3xl);
  }

  h2 {
    font-size: var(--wa-font-size-2xl);
  }

  h3 {
    font-size: var(--wa-font-size-xl);
  }

  h4 {
    font-size: var(--wa-font-size-l);
  }

  h5 {
    font-size: var(--wa-font-size-m);
  }

  h6 {
    font-size: var(--wa-font-size-xs);
  }

  p {
    text-wrap: wrap;
  }
  @supports (text-wrap: pretty) {
    p {
      text-wrap: pretty;
    }
  }
  blockquote {
    padding: var(--wa-space-xl);

    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-longform);
    font-size: var(--wa-font-size-larger);

    border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
  }

  hr {
    margin: var(--wa-content-spacing) 0;

    border: none;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }

  figcaption {
    margin-block-start: var(--wa-space-xs);

    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-line-height-condensed);
  }
  /* #endregion */

  /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.125em;
    padding: 0;
  }

  /* `ul` markers are graphical (3:1 contrast threshold); `ol` markers are text
     (4.5:1). Numerals also wear transparency more than discs, so they keep more
     contrast. `currentColor` lets markers ride along when text color changes. */
  ul > li::marker {
    color: color-mix(in oklch, currentColor 40%, transparent);
  }

  ol > li::marker {
    color: color-mix(in oklch, currentColor 60%, transparent);
  }

  dt {
    font-weight: var(--wa-font-weight-bold);
  }

  menu {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      margin: 0;
    }
  }
  /* #endregion */

  /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--wa-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--wa-color-success-on-quiet);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--wa-color-danger-on-quiet);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    padding: 0.125em 0.25em;

    color: var(--wa-color-warning-on-quiet);

    background-color: var(--wa-color-warning-fill-quiet);
    border-radius: var(--wa-border-radius-s);
  }

  small {
    font-size: var(--wa-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--wa-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--wa-border-radius-s);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    wa-icon {
      vertical-align: -2px;
    }
  }
  /* #endregion */

  /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  *:is([appearance~='accent'], .wa-accent) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  a:hover {
    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
    text-decoration: var(--wa-link-decoration-hover);
    -webkit-text-decoration: var(--wa-link-decoration-hover);
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
  /* #endregion */

  /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-s);
  }

  pre {
    padding: var(--wa-space-m);

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);
    white-space: pre;

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-panel-border-radius);
    overflow-x: auto;

    /* Remove overlapping styles for child code elements */
    & code,
    & samp,
    & var {
      padding: 0;

      font-size: 1em;

      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    }
  }
  /* #endregion */

  /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;
  }

  img,
  picture,
  video {
    border-radius: var(--wa-border-radius-m);
  }

  embed,
  iframe,
  object {
    max-width: 100%;
  }

  iframe {
    border: none;
  }
  /* #endregion */

  /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;

    border: none;
    border-collapse: collapse;

    &.wa-tabular-nums,
    & .wa-tabular-nums {
      font-variant-numeric: tabular-nums;
    }
  }

  caption {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);

    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }

  tbody {
    tr {
      border-block-start: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-quiet);

      :where(table.wa-zebra-rows) &:nth-child(odd) {
        background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
      }

      :where(table.wa-hover-rows) & {
        @media (hover: hover) {
          &:hover {
            background-color: var(--wa-color-fill-quiet);

            &,
            + tr {
              border-block-start-color: var(--wa-color-border-normal);
            }
          }
        }
      }
    }
  }

  td,
  th {
    padding: 0.75em;

    text-align: start;
    vertical-align: top;
  }

  th {
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-bold);

    /* Adds a stronger border below column headers only
     * Row headers are avoided with [scope="row"]
     * or when the next sibling is a non-header cell */
    &:not([scope='row']):not(:has(+ td)) {
      border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
    }
  }
  /* #endregion */

  /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  details {
    padding: 0;

    background-color: var(--wa-color-surface-default);
    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
    border-radius: var(--wa-panel-border-radius);

    overflow-anchor: none;

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: var(--wa-space-m);

      border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      > * {
        margin: 0;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: var(--wa-focus-ring);
        outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
      }
    }

    &[open] {
      padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);

      summary {
        margin-inline: calc(-1 * var(--wa-space-m));

        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &::details-content {
      box-sizing: border-box; /* Ensure contents don't overflow */
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);

      summary {
        list-style: none;
      }
    }
  }

  /* Replace the summary marker */
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '';
      background-color: var(--wa-color-text-quiet);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
        center no-repeat;
      width: 1rem;
      height: 1rem;
      rotate: 0deg;
    }

    &:dir(rtl)::after {
      rotate: 180deg;
    }
  }

  details[open] summary::after {
    rotate: 90deg;
  }
  /* #endregion */

  /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  dialog {
    flex-direction: column;
    align-items: start;

    width: 32rem;
    max-width: calc(100% - var(--wa-space-l));
    padding: var(--wa-space-l);

    background-color: var(--wa-color-surface-raised);
    border-radius: var(--wa-panel-border-radius);
    border: none;
    box-shadow: var(--wa-shadow-l);

    transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);

    /* Center the dialog */
    margin: auto;
    inset: 0;

    &[open] {
      display: flex;
    }

    &:focus {
      outline: none;
    }
  }

  dialog::backdrop {
    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
  }
  /* #endregion */

  /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
  label {
    display: inline-block;
    position: relative;

    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
      width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
      margin-block-start: 0.5em;
    }
  }
  /* #endregion */

  /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
  fieldset {
    padding: var(--wa-space-l);
    padding-block-start: calc(var(--wa-space-l) - 0.5em);

    border: solid 1px var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
  }

  legend {
    padding: 0;
    padding-inline: var(--wa-space-xs);

    font-weight: var(--wa-form-control-label-font-weight);
  }
  /* #endregion */

  /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='file'],
  a.wa-button {
    /* We allow modifier classes on <input type="file">,
     * but these selectors ensure the styles only apply to
     * the file selector button in the user agent's shadow root */
    &:not(input[type='file']),
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      height: var(--wa-form-control-height);
      padding: 0 var(--wa-form-control-padding-inline);

      font-family: inherit;
      font-size: var(--wa-form-control-value-font-size);
      font-weight: var(--wa-font-weight-action);
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;

      border-style: var(--wa-border-style);
      border-width: max(1px, var(--wa-form-control-border-width));

      /* These read the button group's internal custom properties so native buttons can be grouped */
      border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius));
      border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius));
      border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius));
      border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius));

      transition-property: background, border, box-shadow, color;
      transition-duration: var(--wa-transition-fast);
      transition-timing-function: var(--wa-transition-easing);

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      /* Collapse adjacent borders */
      margin-inline-start: var(--_button-horizontal-indent);
      margin-block-start: var(--_button-vertical-indent);
    }

    /* Outlined variants use a negative indent so adjacent borders overlap */
    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        margin-inline-start: var(--_button-horizontal-indent-outlined);
        margin-block-start: var(--_button-vertical-indent-outlined);
      }
    }

    /* Default styles for standard buttons */
    &:not(input[type='file']) {
      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
      border-color: transparent;

      &:not(:disabled) {
        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in oklab,
              var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
              var(--wa-color-mix-hover)
            );
            transform: var(--wa-button-transform-hover);
          }
        }

        &:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
          transform: var(--wa-button-transform-active);
        }

        @media (prefers-reduced-motion: reduce) {
          &:hover,
          &:active {
            transform: none;
          }
        }
      }
    }

    /* Default styles for file selector buttons */
    &:is(input[type='file']) {
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    /* Modifier classes */
    &.wa-plain {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-filled {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }

      &.wa-outlined {
        &:not(input[type='file']),
        &::file-selector-button {
          border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
        }
      }
    }

    &.wa-accent {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
        background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-pill {
      &:not(input[type='file']),
      &::file-selector-button {
        border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill));
        border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill));
        border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill));
        border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill));
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    /* Wrap in :is() so that Safari doesn't stop parsing this block */
    &:is(::-moz-focus-inner) {
      border: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      /* When disabled, prevent mouse events from bubbling up from children */
      * {
        pointer-events: none;
      }
    }

    /* Adds space between icons and adjacent elements
     * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
    & > wa-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }

    & > * + wa-icon {
      margin-inline-start: 0.75em;
    }
  }
  /* #endregion */

  /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
  input[type='file'] {
    display: block;

    max-inline-size: 100%;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    border-radius: var(--wa-border-radius-m);

    cursor: pointer;
  }
  /* #endregion */

  /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
  input[type='checkbox'],
  label:has(input[type='checkbox']),
  input[type='radio'],
  label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
      cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
      opacity: 0.5;

      cursor: not-allowed;
    }
  }

  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;

    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: var(--wa-form-control-toggle-size);
    height: var(--wa-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-border-style);
    border-width: var(--wa-form-control-border-width);

    transition:
      background var(--wa-transition-normal),
      border-color var(--wa-transition-fast),
      box-shadow var(--wa-transition-fast),
      color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }

  /* Checkbox */
  input[type='checkbox'] {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    --checked-icon-scale: 0.8;

    border-radius: min(
      calc(var(--wa-form-control-toggle-size) * 0.375),
      var(--wa-border-radius-s)
    ); /* min prevents entirely circular checkbox */

    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);

      background-color: var(--wa-form-control-activated-color);
      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after,
    &:indeterminate::after {
      content: '';

      width: var(--wa-form-control-toggle-size);
      height: var(--wa-form-control-toggle-size);
      scale: var(--checked-icon-scale);

      background-color: currentColor;
    }

    &:checked::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
        center / 1em 1em no-repeat;
    }

    &:indeterminate::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
        center no-repeat;
    }
  }

  /* Radio */
  input[type='radio'] {
    --checked-icon-color: var(--wa-form-control-activated-color);
    --checked-icon-scale: 0.7;

    color: transparent;

    border-radius: 50%;

    &:checked {
      color: var(--checked-icon-color);

      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after {
      content: '';

      aspect-ratio: 1;
      width: 100%;
      scale: var(--checked-icon-scale);

      background-color: currentColor;
      border-radius: 50%;
    }
  }
  /* #endregion */

  /* #region Text Fields + Textareas + Selects */
  input:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);

    color: var(--wa-form-control-value-color);
    font-size: var(--wa-form-control-value-size);
    font-family: inherit;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-form-control-border-style);
    border-width: var(--wa-form-control-border-width);
    border-radius: var(--wa-form-control-border-radius);

    transition:
      background-color var(--wa-transition-normal),
      border-color var(--wa-transition-normal),
      outline-color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);
    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
    outline-offset: var(--wa-focus-ring-offset);

    cursor: text;

    &::placeholder {
      color: var(--wa-form-control-placeholder-color);

      user-select: none;
      -webkit-user-select: none;
    }

    &:focus-visible {
      outline-color: var(--wa-color-focus);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;
    }

    &.wa-outlined {
      background-color: var(--wa-form-control-background-color);
      border-color: var(--wa-form-control-border-color);
    }

    &.wa-filled {
      background-color: var(--wa-color-neutral-fill-quiet);
      border-color: var(--wa-color-neutral-fill-quiet);

      &.wa-outlined {
        border-color: var(--wa-form-control-border-color);
      }
    }

    &.wa-pill {
      border-radius: var(--wa-border-radius-pill);
    }
  }

  /* Textarea */
  textarea {
    height: auto;
    min-height: var(--wa-form-control-height);
    scroll-padding-block: var(--wa-form-control-padding-block);
    padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

    line-height: var(--wa-line-height-normal);

    resize: vertical;
  }

  /* Select */
  select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right var(--wa-form-control-padding-inline);
    background-blend-mode: hue, difference;
    background-size: 1rem 1rem;
    text-overflow: ellipsis;
    padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
    overflow: hidden;

    cursor: pointer;

    &[multiple] {
      height: auto;
      background-image: none;
      padding-inline: var(--wa-form-control-padding-inline);
    }
  }
  /* #endregion */

  /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
  input[type='color'] {
    display: block;

    block-size: var(--wa-form-control-height);
    inline-size: var(--wa-form-control-height);
    padding: calc(var(--wa-form-control-border-width) * 2);

    font-size: 1em;

    background: transparent;
    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: inherit;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  /* #endregion */

  /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: var(--wa-form-control-height);
    vertical-align: middle;

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--track-size);

      border: none;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;

      width: var(--thumb-width);
      height: var(--thumb-height);
      margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-webkit-slider-thumb {
        cursor: pointer;
      }

      &::-webkit-slider-thumb:active {
        cursor: grabbing;
      }
    }

    &::-moz-focus-outer {
      border: 0;
    }

    &::-moz-range-progress {
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border-radius: 3px;
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-thumb {
      width: var(--thumb-width);
      height: var(--thumb-height);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-moz-range-thumb {
        cursor: pointer;
      }

      &::-moz-range-thumb:active {
        cursor: grabbing;
      }
    }
  }

  label > input[type='range'] {
    margin-block-start: 1em;
  }

  input[type='range']:focus {
    outline: none;
  }

  input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
  /* #endregion */

  /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
  progress {
    --indicator-color: var(--wa-color-brand-fill-loud);

    width: 100%;
    height: 1rem;
    overflow: hidden;

    color: var(--wa-color-brand-on-loud);

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: var(--wa-border-radius-pill);

    &::-webkit-progress-bar {
      background: transparent;
    }

    &[value]::-webkit-progress-value {
      background-color: var(--indicator-color);
    }

    &::-moz-progress-bar {
      background-color: var(--indicator-color);
    }
  }

  /* Indeterminate */
  progress:not([value]) {
    padding-left: var(--inset-inline-start);

    animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);

    &::-webkit-progress-bar {
      background-color: var(
        --indicator-color
      ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
    }
  }

  @keyframes wa-fade-in {
    from {
      opacity: 0;
    }
  }

  /* For some reason Chrome fiercely resists animations on this pseudo
	  so we had to do it with padding on <progress> */
  @keyframes wa-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }

    25%,
    100% {
      padding-inline-end: 0%;
    }

    75%,
    100% {
      padding-inline-start: 100%;
    }
  }
  /* #endregion */

  /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
  .wa-invalid {
    --wa-form-control-border-color: var(--wa-color-danger-border-loud);
    --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
    --wa-form-control-value-color: var(--wa-color-danger-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-danger-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-danger-on-quiet);
  }

  .wa-valid {
    --wa-form-control-border-color: var(--wa-color-success-border-loud);
    --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
    --wa-form-control-value-color: var(--wa-color-success-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-success-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-success-on-quiet);
  }
  /* #endregion */
}



@layer wa-utilities {
  /*
   * Utility to minimize FOUCE and show custom elements only after they're registered
   */
  .wa-cloak:has(:not(:defined)) {
    animation: 2s step-end wa-fouce-cloak;
  }

  @keyframes wa-fouce-cloak {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@layer wa-utilities {
  .wa-visually-hidden:not(:focus-within),
  .wa-visually-hidden-force,
  .wa-visually-hidden-hint::part(hint),
  .wa-visually-hidden-label::part(label),
  .wa-visually-hidden-label::part(form-control-label) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
}

@layer wa-utilities {
  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
  @supports (scrollbar-gutter: stable) {
    .wa-scroll-lock {
      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
    }

    .wa-scroll-lock body {
      overflow: hidden !important;
    }
  }

  /** This can go away once Safari has scrollbar-gutter support. */
  @supports not (scrollbar-gutter: stable) {
    .wa-scroll-lock body {
      padding-right: var(--wa-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}

@layer wa-utilities {
  .wa-placeholder {
    align-self: stretch;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-3xl);
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
  :where(
    .wa-align-items-start,
    .wa-align-items-end,
    .wa-align-items-center,
    .wa-align-items-stretch,
    .wa-align-items-baseline
  ) {
    display: flex;
  }

  .wa-align-items-start {
    align-items: flex-start;
  }
  .wa-align-items-end {
    align-items: flex-end;
  }
  .wa-align-items-center {
    align-items: center;
  }
  .wa-align-items-stretch {
    align-items: stretch;
  }
  .wa-align-items-baseline {
    align-items: baseline;
  }

  .wa-align-self-start {
    align-self: flex-start;
  }
  .wa-align-self-end {
    align-self: flex-end;
  }
  .wa-align-self-center {
    align-self: center;
  }
  .wa-align-self-stretch {
    align-self: stretch;
  }
  .wa-align-self-baseline {
    align-self: baseline;
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
  :where(
    .wa-justify-content-start,
    .wa-justify-content-end,
    .wa-justify-content-center,
    .wa-justify-content-space-around,
    .wa-justify-content-space-between,
    .wa-justify-content-space-evenly
  ) {
    display: flex;
  }

  .wa-justify-content-start {
    justify-content: flex-start;
  }
  .wa-justify-content-end {
    justify-content: flex-end;
  }
  .wa-justify-content-center {
    justify-content: center;
  }
  .wa-justify-content-space-around {
    justify-content: space-around;
  }
  .wa-justify-content-space-between {
    justify-content: space-between;
  }
  .wa-justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a flex wrap util produces a visible change */
  :where(.wa-flex-wrap, .wa-flex-nowrap, .wa-flex-wrap-reverse) {
    display: flex;
  }

  .wa-flex-wrap {
    flex-wrap: wrap;
  }
  .wa-flex-nowrap {
    flex-wrap: nowrap;
  }
  .wa-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@layer wa-utilities {
  .wa-border-radius-s {
    border-radius: var(--wa-border-radius-s);
  }
  .wa-border-radius-m {
    border-radius: var(--wa-border-radius-m);
  }
  .wa-border-radius-l {
    border-radius: var(--wa-border-radius-l);
  }
  .wa-border-radius-pill {
    border-radius: var(--wa-border-radius-pill);
  }
  .wa-border-radius-circle {
    border-radius: var(--wa-border-radius-circle);
  }
  .wa-border-radius-square {
    border-radius: var(--wa-border-radius-square);
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .wa-gap-0,
    .wa-gap-3xs,
    .wa-gap-2xs,
    .wa-gap-xs,
    .wa-gap-s,
    .wa-gap-m,
    .wa-gap-l,
    .wa-gap-xl,
    .wa-gap-2xl,
    .wa-gap-3xl,
    .wa-gap-4xl,
    .wa-gap-5xl
  ) {
    display: flex;
  }

  .wa-gap-0 {
    gap: 0px;
  }
  .wa-gap-3xs {
    gap: var(--wa-space-3xs);
  }
  .wa-gap-2xs {
    gap: var(--wa-space-2xs);
  }
  .wa-gap-xs {
    gap: var(--wa-space-xs);
  }
  .wa-gap-s {
    gap: var(--wa-space-s);
  }
  .wa-gap-m {
    gap: var(--wa-space-m);
  }
  .wa-gap-l {
    gap: var(--wa-space-l);
  }
  .wa-gap-xl {
    gap: var(--wa-space-xl);
  }
  .wa-gap-2xl {
    gap: var(--wa-space-2xl);
  }
  .wa-gap-3xl {
    gap: var(--wa-space-3xl);
  }
  .wa-gap-4xl {
    gap: var(--wa-space-4xl);
  }
  .wa-gap-5xl {
    gap: var(--wa-space-5xl);
  }
}

@layer wa-utilities {
  /* #region General ~~~~~ */
  [class*='wa-body'] {
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
  }

  [class*='wa-heading'] {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  [class*='wa-caption'] {
    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-condensed);
  }

  [class*='wa-longform'] {
    font-family: var(--wa-font-family-longform);
    font-weight: var(--wa-font-weight-longform);
    line-height: var(--wa-line-height-normal);
  }

  .wa-font-size-3xs,
  .wa-body-3xs,
  .wa-heading-3xs,
  .wa-caption-3xs,
  .wa-longform-3xs {
    font-size: var(--wa-font-size-3xs);
  }

  .wa-font-size-2xs,
  .wa-body-2xs,
  .wa-heading-2xs,
  .wa-caption-2xs,
  .wa-longform-2xs {
    font-size: var(--wa-font-size-2xs);
  }

  .wa-font-size-xs,
  .wa-body-xs,
  .wa-heading-xs,
  .wa-caption-xs,
  .wa-longform-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-font-size-s,
  .wa-body-s,
  .wa-heading-s,
  .wa-caption-s,
  .wa-longform-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-font-size-m,
  .wa-body-m,
  .wa-heading-m,
  .wa-caption-m,
  .wa-longform-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-font-size-l,
  .wa-body-l,
  .wa-heading-l,
  .wa-caption-l,
  .wa-longform-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-font-size-xl,
  .wa-body-xl,
  .wa-heading-xl,
  .wa-caption-xl,
  .wa-longform-xl {
    font-size: var(--wa-font-size-xl);
  }

  .wa-font-size-2xl,
  .wa-body-2xl,
  .wa-heading-2xl,
  .wa-caption-2xl,
  .wa-longform-2xl {
    font-size: var(--wa-font-size-2xl);
  }

  .wa-font-size-3xl,
  .wa-body-3xl,
  .wa-heading-3xl,
  .wa-caption-3xl,
  .wa-longform-3xl {
    font-size: var(--wa-font-size-3xl);
  }

  .wa-font-size-4xl,
  .wa-body-4xl,
  .wa-heading-4xl,
  .wa-caption-4xl,
  .wa-longform-4xl {
    font-size: var(--wa-font-size-4xl);
  }

  .wa-font-size-5xl,
  .wa-body-5xl,
  .wa-heading-5xl,
  .wa-caption-5xl,
  .wa-longform-5xl {
    font-size: var(--wa-font-size-5xl);
  }

  .wa-font-weight-light {
    font-weight: var(--wa-font-weight-light);
  }

  .wa-font-weight-normal {
    font-weight: var(--wa-font-weight-normal);
  }

  .wa-font-weight-semibold {
    font-weight: var(--wa-font-weight-semibold);
  }

  .wa-font-weight-bold {
    font-weight: var(--wa-font-weight-bold);
  }

  .wa-color-text-normal {
    color: var(--wa-color-text-normal);
  }

  .wa-color-text-quiet {
    color: var(--wa-color-text-quiet);
  }

  .wa-color-text-link {
    color: var(--wa-color-text-link);
  }

  .wa-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-text-nowrap,
  .wa-text-wrap-nowrap {
    text-wrap: nowrap;
  }

  .wa-text-balance,
  .wa-text-wrap-balance {
    text-wrap: balance;
  }

  @supports (text-wrap: pretty) {
    .wa-text-pretty,
    .wa-text-wrap-pretty {
      text-wrap: pretty;
    }
  }

  .wa-text-uppercase {
    text-transform: uppercase;
  }

  .wa-text-lowercase {
    text-transform: lowercase;
  }

  .wa-text-capitalize {
    text-transform: capitalize;
  }

  .wa-text-start {
    text-align: start;
  }

  .wa-text-center {
    text-align: center;
  }

  .wa-text-end {
    text-align: end;
  }

  .wa-text-justify {
    text-align: justify;
  }
  /* #endregion */

  /* #region Links ~~~~~~~ */
  .wa-link {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
        text-decoration: var(--wa-link-decoration-hover);
        -webkit-text-decoration: var(--wa-link-decoration-hover);
      }
    }
  }

  .wa-link-plain {
    color: var(--wa-color-text-normal);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
        text-decoration: none;
      }
    }
  }
  /* #endregion */

  /* #region Lists ~~~~~~~ */
  .wa-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;

    > li {
      margin-inline-start: 0;
    }
  }
  /* #endregion */

  /* #region Form Controls */
  .wa-form-control-label {
    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);
  }

  .wa-form-control-value {
    color: var(--wa-form-control-value-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-placeholder {
    color: var(--wa-form-control-placeholder-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-hint {
    color: var(--wa-form-control-hint-color);
    font-weight: var(--wa-form-control-hint-font-weight);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-form-control-hint-line-height);
  }
  /* #endregion */
}

@layer wa-utilities {
  :is(
      [class*='wa-cluster'],
      [class*='wa-flank'],
      [class*='wa-frame'],
      [class*='wa-grid'],
      [class*='wa-stack'],
      [class*='wa-split']
    )
    > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where(
    [class*='wa-cluster'],
    [class*='wa-flank'],
    [class*='wa-frame'],
    [class*='wa-grid'],
    [class*='wa-stack'],
    [class*='wa-split']
  ) {
    gap: var(--wa-space-m);
  }

  /* #region Cluster */
  [class*='wa-cluster'] {
    display: flex;
  }

  :where([class*='wa-cluster']) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Flank */
  [class*='wa-flank'] {
    display: flex;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='wa-flank']:not([class*='\:end']) > :first-child,
  [class*='wa-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank']:not([class*='\:end']) > :last-child,
  [class*='wa-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='wa-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  :where([class*='wa-flank']) {
    align-items: center;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Frame */
  [class*='wa-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  [class*='wa-frame'] > img,
  [class*='wa-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='wa-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='wa-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='wa-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }

  :where([class*='wa-frame']) {
    align-items: center;
    justify-content: center;
  }
  /* #endregion */

  /* #region Grid */
  [class*='wa-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

    --min-column-size: initial;
  }

  .wa-span-grid {
    grid-column: 1 / -1;
  }
  /* #endregion */

  /* #region Split */
  [class*='wa-split'] {
    display: flex;
  }

  [class*='wa-split'],
  [class*='wa-split'][class*='\:row'] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }

  [class*='wa-split']:not([class*='\:column']) > :first-child {
    flex: 0 1 auto;
  }

  [class*='wa-split'][class*='\:column'] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }

  :where([class*='wa-split']) {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* #endregion */

  /* #region Stack */
  [class*='wa-stack'] {
    display: flex;
    flex-direction: column;
  }

  :where([class*='wa-stack']) {
    align-items: stretch;
    justify-content: flex-start;
  }
  /* #endregion */
}

@layer wa-utilities {
  /* `wa-prose` applies hierarchical, asymmetric typographic rhythm to a block
     of long-form content. Builds on `wa-native`'s base block styles instead of
     duplicating them. Em-based spacing scales when composed with `wa-font-size-*`.
     The class and its element selectors are wrapped in `:where()` so every rule
     sits at 0,0,0 specificity — any utility class or element rule the author
     applies inside the container takes precedence without weight tricks. */

  /* @scope is Newly Available in Baseline 2025. As such, it should be reserved for
     non-essential, progressive enhancement features until @scope is established
     as Widely Available. https://caniuse.com/css-cascade-scope */
  @scope (.wa-prose) to (.wa-not-prose) {
    :where(:scope) {
      /* #region Tokens ~~~~~~~~~~~~ */

      /* Em-based rhythm scale: each token resolves at the use site, so margins
        scale with the element's own font-size. `--wa-prose-rhythm-scale` is a
        single knob to tighten or loosen everything at once. */
      --wa-prose-rhythm-scale: 1;
      --wa-prose-rhythm-2xs: calc(0.25em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xs: calc(0.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-s: calc(0.75em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-m: calc(1em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-l: calc(1.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xl: calc(2em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-2xl: calc(2.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-3xl: calc(3em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));

      --wa-prose-line-length: 65ch;

      max-inline-size: var(--wa-prose-line-length);

      /* Oldstyle proportional figures for running text; tables reassert
        `tabular-nums` below. Fonts without the OpenType feature fall back. */
      font-variant-numeric: oldstyle-nums proportional-nums;

      /* Inherits to descendants. Safari today; progressive enhancement elsewhere. */
      hanging-punctuation: first last allow-end;
      /* #endregion */

      /* #region Headings ~~~~~~~~~~~~ */

      /* Em sizes inherit through the cascade — re-applying `--wa-font-size-scale`
        here would double-scale. Authors overriding should stay em-based. */
      & :where(h1) {
        font-size: 2.5625em;
      }
      & :where(h2) {
        font-size: 2em;
      }
      & :where(h3) {
        font-size: 1.5625em;
      }
      & :where(h4) {
        font-size: 1.25em;
      }
      & :where(h5) {
        font-size: 1em;
      }
      & :where(h6) {
        font-size: 0.75em;
      }

      /* Slight optical tracking; only the larger sizes need it. */
      & :where(h1, h2) {
        letter-spacing: -0.01em;
      }

      /* Headings hug what they introduce: generous above, tight below. */
      & :where(h1):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h2) {
        margin-block-start: var(--wa-prose-rhythm-2xl);
      }
      & :where(h2):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h3) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }
      & :where(h3):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & :where(h4, h5, h6):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xs);
      }

      /* Back-to-back headings tighten so the second reads as subordinate.
        Enumerated explicitly — skipping more than two levels is rare enough
        that the default rhythm reads better. */
      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */

      /* #region Body text & lists ~~~~~~~~~~~~ */

      /* Replaces wa-native's rem-based `--wa-content-spacing` with em rhythm. */
      & :where(p, ul, ol, dl):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-l);
      }

      & :where(ul, ol) > :where(li):has(+ li) {
        margin-block-end: var(--wa-prose-rhythm-2xs);
      }

      & :where(dd):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }
      /* #endregion */

      /* #region Captions ~~~~~~~~~~~~ */

      /* Em-based override keeps caption spacing in step with the prose
        container; wa-native sets the visual style. */
      & :where(figcaption) {
        margin-block-start: var(--wa-prose-rhythm-xs);
      }
      /* #endregion */

      /* #region Inline code & long-word breaks ~~~~~~~~~~~~ */

      /* `anywhere` is the right trade-off in prose: long URLs and identifiers
        break instead of overflowing the column. */
      & :where(code, pre) {
        overflow-wrap: anywhere;
      }
      /* #endregion */

      /* #region Section breaks & major non-text blocks ~~~~~~~~~~~~ */

      /* `<hr>`'s own margin defines the gap; the next heading shouldn't double-stack. */
      & :where(hr) {
        margin-block: var(--wa-prose-rhythm-3xl);
      }
      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
        margin-block-start: 0;
      }

      /* Major non-text blocks get more air than running prose, but headings
        still hug — so the top-margin rule excludes the heading-to-block case
        (handled separately below with a smaller gap). */
      & :where(pre, figure, table, blockquote, wa-callout, details):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xl);
      }

      & :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }

      & :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */
    }
  }
}





/* Rules shared by all palettes */

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-brand-blue {
    --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-brand-red {
    --wa-color-brand-95: var(--wa-color-red-95);
    --wa-color-brand-90: var(--wa-color-red-90);
    --wa-color-brand-80: var(--wa-color-red-80);
    --wa-color-brand-70: var(--wa-color-red-70);
    --wa-color-brand-60: var(--wa-color-red-60);
    --wa-color-brand-50: var(--wa-color-red-50);
    --wa-color-brand-40: var(--wa-color-red-40);
    --wa-color-brand-30: var(--wa-color-red-30);
    --wa-color-brand-20: var(--wa-color-red-20);
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
    --wa-color-brand-on: var(--wa-color-red-on);
  }

  .wa-brand-orange {
    --wa-color-brand-95: var(--wa-color-orange-95);
    --wa-color-brand-90: var(--wa-color-orange-90);
    --wa-color-brand-80: var(--wa-color-orange-80);
    --wa-color-brand-70: var(--wa-color-orange-70);
    --wa-color-brand-60: var(--wa-color-orange-60);
    --wa-color-brand-50: var(--wa-color-orange-50);
    --wa-color-brand-40: var(--wa-color-orange-40);
    --wa-color-brand-30: var(--wa-color-orange-30);
    --wa-color-brand-20: var(--wa-color-orange-20);
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
    --wa-color-brand-on: var(--wa-color-orange-on);
  }

  .wa-brand-yellow {
    --wa-color-brand-95: var(--wa-color-yellow-95);
    --wa-color-brand-90: var(--wa-color-yellow-90);
    --wa-color-brand-80: var(--wa-color-yellow-80);
    --wa-color-brand-70: var(--wa-color-yellow-70);
    --wa-color-brand-60: var(--wa-color-yellow-60);
    --wa-color-brand-50: var(--wa-color-yellow-50);
    --wa-color-brand-40: var(--wa-color-yellow-40);
    --wa-color-brand-30: var(--wa-color-yellow-30);
    --wa-color-brand-20: var(--wa-color-yellow-20);
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }

  .wa-brand-green {
    --wa-color-brand-95: var(--wa-color-green-95);
    --wa-color-brand-90: var(--wa-color-green-90);
    --wa-color-brand-80: var(--wa-color-green-80);
    --wa-color-brand-70: var(--wa-color-green-70);
    --wa-color-brand-60: var(--wa-color-green-60);
    --wa-color-brand-50: var(--wa-color-green-50);
    --wa-color-brand-40: var(--wa-color-green-40);
    --wa-color-brand-30: var(--wa-color-green-30);
    --wa-color-brand-20: var(--wa-color-green-20);
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
    --wa-color-brand-on: var(--wa-color-green-on);
  }

  .wa-brand-cyan {
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }

  .wa-brand-indigo {
    --wa-color-brand-95: var(--wa-color-indigo-95);
    --wa-color-brand-90: var(--wa-color-indigo-90);
    --wa-color-brand-80: var(--wa-color-indigo-80);
    --wa-color-brand-70: var(--wa-color-indigo-70);
    --wa-color-brand-60: var(--wa-color-indigo-60);
    --wa-color-brand-50: var(--wa-color-indigo-50);
    --wa-color-brand-40: var(--wa-color-indigo-40);
    --wa-color-brand-30: var(--wa-color-indigo-30);
    --wa-color-brand-20: var(--wa-color-indigo-20);
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }

  .wa-brand-purple {
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand-20: var(--wa-color-purple-20);
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
    --wa-color-brand-on: var(--wa-color-purple-on);
  }

  .wa-brand-pink {
    --wa-color-brand-95: var(--wa-color-pink-95);
    --wa-color-brand-90: var(--wa-color-pink-90);
    --wa-color-brand-80: var(--wa-color-pink-80);
    --wa-color-brand-70: var(--wa-color-pink-70);
    --wa-color-brand-60: var(--wa-color-pink-60);
    --wa-color-brand-50: var(--wa-color-pink-50);
    --wa-color-brand-40: var(--wa-color-pink-40);
    --wa-color-brand-30: var(--wa-color-pink-30);
    --wa-color-brand-20: var(--wa-color-pink-20);
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
    --wa-color-brand-on: var(--wa-color-pink-on);
  }

  .wa-brand-gray {
    --wa-color-brand-95: var(--wa-color-gray-95);
    --wa-color-brand-90: var(--wa-color-gray-90);
    --wa-color-brand-80: var(--wa-color-gray-80);
    --wa-color-brand-70: var(--wa-color-gray-70);
    --wa-color-brand-60: var(--wa-color-gray-60);
    --wa-color-brand-50: var(--wa-color-gray-50);
    --wa-color-brand-40: var(--wa-color-gray-40);
    --wa-color-brand-30: var(--wa-color-gray-30);
    --wa-color-brand-20: var(--wa-color-gray-20);
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-neutral-gray {
    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-gray);
    --wa-color-neutral-on: var(--wa-color-gray-on);
  }

  .wa-neutral-red {
    --wa-color-neutral-95: var(--wa-color-red-95);
    --wa-color-neutral-90: var(--wa-color-red-90);
    --wa-color-neutral-80: var(--wa-color-red-80);
    --wa-color-neutral-70: var(--wa-color-red-70);
    --wa-color-neutral-60: var(--wa-color-red-60);
    --wa-color-neutral-50: var(--wa-color-red-50);
    --wa-color-neutral-40: var(--wa-color-red-40);
    --wa-color-neutral-30: var(--wa-color-red-30);
    --wa-color-neutral-20: var(--wa-color-red-20);
    --wa-color-neutral-10: var(--wa-color-red-10);
    --wa-color-neutral-05: var(--wa-color-red-05);
    --wa-color-neutral: var(--wa-color-red);
    --wa-color-neutral-on: var(--wa-color-red-on);
  }

  .wa-neutral-orange {
    --wa-color-neutral-95: var(--wa-color-orange-95);
    --wa-color-neutral-90: var(--wa-color-orange-90);
    --wa-color-neutral-80: var(--wa-color-orange-80);
    --wa-color-neutral-70: var(--wa-color-orange-70);
    --wa-color-neutral-60: var(--wa-color-orange-60);
    --wa-color-neutral-50: var(--wa-color-orange-50);
    --wa-color-neutral-40: var(--wa-color-orange-40);
    --wa-color-neutral-30: var(--wa-color-orange-30);
    --wa-color-neutral-20: var(--wa-color-orange-20);
    --wa-color-neutral-10: var(--wa-color-orange-10);
    --wa-color-neutral-05: var(--wa-color-orange-05);
    --wa-color-neutral: var(--wa-color-orange);
    --wa-color-neutral-on: var(--wa-color-orange-on);
  }

  .wa-neutral-yellow {
    --wa-color-neutral-95: var(--wa-color-yellow-95);
    --wa-color-neutral-90: var(--wa-color-yellow-90);
    --wa-color-neutral-80: var(--wa-color-yellow-80);
    --wa-color-neutral-70: var(--wa-color-yellow-70);
    --wa-color-neutral-60: var(--wa-color-yellow-60);
    --wa-color-neutral-50: var(--wa-color-yellow-50);
    --wa-color-neutral-40: var(--wa-color-yellow-40);
    --wa-color-neutral-30: var(--wa-color-yellow-30);
    --wa-color-neutral-20: var(--wa-color-yellow-20);
    --wa-color-neutral-10: var(--wa-color-yellow-10);
    --wa-color-neutral-05: var(--wa-color-yellow-05);
    --wa-color-neutral: var(--wa-color-yellow);
    --wa-color-neutral-on: var(--wa-color-yellow-on);
  }

  .wa-neutral-green {
    --wa-color-neutral-95: var(--wa-color-green-95);
    --wa-color-neutral-90: var(--wa-color-green-90);
    --wa-color-neutral-80: var(--wa-color-green-80);
    --wa-color-neutral-70: var(--wa-color-green-70);
    --wa-color-neutral-60: var(--wa-color-green-60);
    --wa-color-neutral-50: var(--wa-color-green-50);
    --wa-color-neutral-40: var(--wa-color-green-40);
    --wa-color-neutral-30: var(--wa-color-green-30);
    --wa-color-neutral-20: var(--wa-color-green-20);
    --wa-color-neutral-10: var(--wa-color-green-10);
    --wa-color-neutral-05: var(--wa-color-green-05);
    --wa-color-neutral: var(--wa-color-green);
    --wa-color-neutral-on: var(--wa-color-green-on);
  }

  .wa-neutral-cyan {
    --wa-color-neutral-95: var(--wa-color-cyan-95);
    --wa-color-neutral-90: var(--wa-color-cyan-90);
    --wa-color-neutral-80: var(--wa-color-cyan-80);
    --wa-color-neutral-70: var(--wa-color-cyan-70);
    --wa-color-neutral-60: var(--wa-color-cyan-60);
    --wa-color-neutral-50: var(--wa-color-cyan-50);
    --wa-color-neutral-40: var(--wa-color-cyan-40);
    --wa-color-neutral-30: var(--wa-color-cyan-30);
    --wa-color-neutral-20: var(--wa-color-cyan-20);
    --wa-color-neutral-10: var(--wa-color-cyan-10);
    --wa-color-neutral-05: var(--wa-color-cyan-05);
    --wa-color-neutral: var(--wa-color-cyan);
    --wa-color-neutral-on: var(--wa-color-cyan-on);
  }

  .wa-neutral-blue {
    --wa-color-neutral-95: var(--wa-color-blue-95);
    --wa-color-neutral-90: var(--wa-color-blue-90);
    --wa-color-neutral-80: var(--wa-color-blue-80);
    --wa-color-neutral-70: var(--wa-color-blue-70);
    --wa-color-neutral-60: var(--wa-color-blue-60);
    --wa-color-neutral-50: var(--wa-color-blue-50);
    --wa-color-neutral-40: var(--wa-color-blue-40);
    --wa-color-neutral-30: var(--wa-color-blue-30);
    --wa-color-neutral-20: var(--wa-color-blue-20);
    --wa-color-neutral-10: var(--wa-color-blue-10);
    --wa-color-neutral-05: var(--wa-color-blue-05);
    --wa-color-neutral: var(--wa-color-blue);
    --wa-color-neutral-on: var(--wa-color-blue-on);
  }

  .wa-neutral-indigo {
    --wa-color-neutral-95: var(--wa-color-indigo-95);
    --wa-color-neutral-90: var(--wa-color-indigo-90);
    --wa-color-neutral-80: var(--wa-color-indigo-80);
    --wa-color-neutral-70: var(--wa-color-indigo-70);
    --wa-color-neutral-60: var(--wa-color-indigo-60);
    --wa-color-neutral-50: var(--wa-color-indigo-50);
    --wa-color-neutral-40: var(--wa-color-indigo-40);
    --wa-color-neutral-30: var(--wa-color-indigo-30);
    --wa-color-neutral-20: var(--wa-color-indigo-20);
    --wa-color-neutral-10: var(--wa-color-indigo-10);
    --wa-color-neutral-05: var(--wa-color-indigo-05);
    --wa-color-neutral: var(--wa-color-indigo);
    --wa-color-neutral-on: var(--wa-color-indigo-on);
  }

  .wa-neutral-purple {
    --wa-color-neutral-95: var(--wa-color-purple-95);
    --wa-color-neutral-90: var(--wa-color-purple-90);
    --wa-color-neutral-80: var(--wa-color-purple-80);
    --wa-color-neutral-70: var(--wa-color-purple-70);
    --wa-color-neutral-60: var(--wa-color-purple-60);
    --wa-color-neutral-50: var(--wa-color-purple-50);
    --wa-color-neutral-40: var(--wa-color-purple-40);
    --wa-color-neutral-30: var(--wa-color-purple-30);
    --wa-color-neutral-20: var(--wa-color-purple-20);
    --wa-color-neutral-10: var(--wa-color-purple-10);
    --wa-color-neutral-05: var(--wa-color-purple-05);
    --wa-color-neutral: var(--wa-color-purple);
    --wa-color-neutral-on: var(--wa-color-purple-on);
  }

  .wa-neutral-pink {
    --wa-color-neutral-95: var(--wa-color-pink-95);
    --wa-color-neutral-90: var(--wa-color-pink-90);
    --wa-color-neutral-80: var(--wa-color-pink-80);
    --wa-color-neutral-70: var(--wa-color-pink-70);
    --wa-color-neutral-60: var(--wa-color-pink-60);
    --wa-color-neutral-50: var(--wa-color-pink-50);
    --wa-color-neutral-40: var(--wa-color-pink-40);
    --wa-color-neutral-30: var(--wa-color-pink-30);
    --wa-color-neutral-20: var(--wa-color-pink-20);
    --wa-color-neutral-10: var(--wa-color-pink-10);
    --wa-color-neutral-05: var(--wa-color-pink-05);
    --wa-color-neutral: var(--wa-color-pink);
    --wa-color-neutral-on: var(--wa-color-pink-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-success-green {
    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-green);
    --wa-color-success-on: var(--wa-color-green-on);
  }

  .wa-success-red {
    --wa-color-success-95: var(--wa-color-red-95);
    --wa-color-success-90: var(--wa-color-red-90);
    --wa-color-success-80: var(--wa-color-red-80);
    --wa-color-success-70: var(--wa-color-red-70);
    --wa-color-success-60: var(--wa-color-red-60);
    --wa-color-success-50: var(--wa-color-red-50);
    --wa-color-success-40: var(--wa-color-red-40);
    --wa-color-success-30: var(--wa-color-red-30);
    --wa-color-success-20: var(--wa-color-red-20);
    --wa-color-success-10: var(--wa-color-red-10);
    --wa-color-success-05: var(--wa-color-red-05);
    --wa-color-success: var(--wa-color-red);
    --wa-color-success-on: var(--wa-color-red-on);
  }

  .wa-success-orange {
    --wa-color-success-95: var(--wa-color-orange-95);
    --wa-color-success-90: var(--wa-color-orange-90);
    --wa-color-success-80: var(--wa-color-orange-80);
    --wa-color-success-70: var(--wa-color-orange-70);
    --wa-color-success-60: var(--wa-color-orange-60);
    --wa-color-success-50: var(--wa-color-orange-50);
    --wa-color-success-40: var(--wa-color-orange-40);
    --wa-color-success-30: var(--wa-color-orange-30);
    --wa-color-success-20: var(--wa-color-orange-20);
    --wa-color-success-10: var(--wa-color-orange-10);
    --wa-color-success-05: var(--wa-color-orange-05);
    --wa-color-success: var(--wa-color-orange);
    --wa-color-success-on: var(--wa-color-orange-on);
  }

  .wa-success-yellow {
    --wa-color-success-95: var(--wa-color-yellow-95);
    --wa-color-success-90: var(--wa-color-yellow-90);
    --wa-color-success-80: var(--wa-color-yellow-80);
    --wa-color-success-70: var(--wa-color-yellow-70);
    --wa-color-success-60: var(--wa-color-yellow-60);
    --wa-color-success-50: var(--wa-color-yellow-50);
    --wa-color-success-40: var(--wa-color-yellow-40);
    --wa-color-success-30: var(--wa-color-yellow-30);
    --wa-color-success-20: var(--wa-color-yellow-20);
    --wa-color-success-10: var(--wa-color-yellow-10);
    --wa-color-success-05: var(--wa-color-yellow-05);
    --wa-color-success: var(--wa-color-yellow);
    --wa-color-success-on: var(--wa-color-yellow-on);
  }

  .wa-success-cyan {
    --wa-color-success-95: var(--wa-color-cyan-95);
    --wa-color-success-90: var(--wa-color-cyan-90);
    --wa-color-success-80: var(--wa-color-cyan-80);
    --wa-color-success-70: var(--wa-color-cyan-70);
    --wa-color-success-60: var(--wa-color-cyan-60);
    --wa-color-success-50: var(--wa-color-cyan-50);
    --wa-color-success-40: var(--wa-color-cyan-40);
    --wa-color-success-30: var(--wa-color-cyan-30);
    --wa-color-success-20: var(--wa-color-cyan-20);
    --wa-color-success-10: var(--wa-color-cyan-10);
    --wa-color-success-05: var(--wa-color-cyan-05);
    --wa-color-success: var(--wa-color-cyan);
    --wa-color-success-on: var(--wa-color-cyan-on);
  }

  .wa-success-blue {
    --wa-color-success-95: var(--wa-color-blue-95);
    --wa-color-success-90: var(--wa-color-blue-90);
    --wa-color-success-80: var(--wa-color-blue-80);
    --wa-color-success-70: var(--wa-color-blue-70);
    --wa-color-success-60: var(--wa-color-blue-60);
    --wa-color-success-50: var(--wa-color-blue-50);
    --wa-color-success-40: var(--wa-color-blue-40);
    --wa-color-success-30: var(--wa-color-blue-30);
    --wa-color-success-20: var(--wa-color-blue-20);
    --wa-color-success-10: var(--wa-color-blue-10);
    --wa-color-success-05: var(--wa-color-blue-05);
    --wa-color-success: var(--wa-color-blue);
    --wa-color-success-on: var(--wa-color-blue-on);
  }

  .wa-success-indigo {
    --wa-color-success-95: var(--wa-color-indigo-95);
    --wa-color-success-90: var(--wa-color-indigo-90);
    --wa-color-success-80: var(--wa-color-indigo-80);
    --wa-color-success-70: var(--wa-color-indigo-70);
    --wa-color-success-60: var(--wa-color-indigo-60);
    --wa-color-success-50: var(--wa-color-indigo-50);
    --wa-color-success-40: var(--wa-color-indigo-40);
    --wa-color-success-30: var(--wa-color-indigo-30);
    --wa-color-success-20: var(--wa-color-indigo-20);
    --wa-color-success-10: var(--wa-color-indigo-10);
    --wa-color-success-05: var(--wa-color-indigo-05);
    --wa-color-success: var(--wa-color-indigo);
    --wa-color-success-on: var(--wa-color-indigo-on);
  }

  .wa-success-purple {
    --wa-color-success-95: var(--wa-color-purple-95);
    --wa-color-success-90: var(--wa-color-purple-90);
    --wa-color-success-80: var(--wa-color-purple-80);
    --wa-color-success-70: var(--wa-color-purple-70);
    --wa-color-success-60: var(--wa-color-purple-60);
    --wa-color-success-50: var(--wa-color-purple-50);
    --wa-color-success-40: var(--wa-color-purple-40);
    --wa-color-success-30: var(--wa-color-purple-30);
    --wa-color-success-20: var(--wa-color-purple-20);
    --wa-color-success-10: var(--wa-color-purple-10);
    --wa-color-success-05: var(--wa-color-purple-05);
    --wa-color-success: var(--wa-color-purple);
    --wa-color-success-on: var(--wa-color-purple-on);
  }

  .wa-success-pink {
    --wa-color-success-95: var(--wa-color-pink-95);
    --wa-color-success-90: var(--wa-color-pink-90);
    --wa-color-success-80: var(--wa-color-pink-80);
    --wa-color-success-70: var(--wa-color-pink-70);
    --wa-color-success-60: var(--wa-color-pink-60);
    --wa-color-success-50: var(--wa-color-pink-50);
    --wa-color-success-40: var(--wa-color-pink-40);
    --wa-color-success-30: var(--wa-color-pink-30);
    --wa-color-success-20: var(--wa-color-pink-20);
    --wa-color-success-10: var(--wa-color-pink-10);
    --wa-color-success-05: var(--wa-color-pink-05);
    --wa-color-success: var(--wa-color-pink);
    --wa-color-success-on: var(--wa-color-pink-on);
  }

  .wa-success-gray {
    --wa-color-success-95: var(--wa-color-gray-95);
    --wa-color-success-90: var(--wa-color-gray-90);
    --wa-color-success-80: var(--wa-color-gray-80);
    --wa-color-success-70: var(--wa-color-gray-70);
    --wa-color-success-60: var(--wa-color-gray-60);
    --wa-color-success-50: var(--wa-color-gray-50);
    --wa-color-success-40: var(--wa-color-gray-40);
    --wa-color-success-30: var(--wa-color-gray-30);
    --wa-color-success-20: var(--wa-color-gray-20);
    --wa-color-success-10: var(--wa-color-gray-10);
    --wa-color-success-05: var(--wa-color-gray-05);
    --wa-color-success: var(--wa-color-gray);
    --wa-color-success-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-warning-yellow {
    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-yellow);
    --wa-color-warning-on: var(--wa-color-yellow-on);
  }

  .wa-warning-red {
    --wa-color-warning-95: var(--wa-color-red-95);
    --wa-color-warning-90: var(--wa-color-red-90);
    --wa-color-warning-80: var(--wa-color-red-80);
    --wa-color-warning-70: var(--wa-color-red-70);
    --wa-color-warning-60: var(--wa-color-red-60);
    --wa-color-warning-50: var(--wa-color-red-50);
    --wa-color-warning-40: var(--wa-color-red-40);
    --wa-color-warning-30: var(--wa-color-red-30);
    --wa-color-warning-20: var(--wa-color-red-20);
    --wa-color-warning-10: var(--wa-color-red-10);
    --wa-color-warning-05: var(--wa-color-red-05);
    --wa-color-warning: var(--wa-color-red);
    --wa-color-warning-on: var(--wa-color-red-on);
  }

  .wa-warning-orange {
    --wa-color-warning-95: var(--wa-color-orange-95);
    --wa-color-warning-90: var(--wa-color-orange-90);
    --wa-color-warning-80: var(--wa-color-orange-80);
    --wa-color-warning-70: var(--wa-color-orange-70);
    --wa-color-warning-60: var(--wa-color-orange-60);
    --wa-color-warning-50: var(--wa-color-orange-50);
    --wa-color-warning-40: var(--wa-color-orange-40);
    --wa-color-warning-30: var(--wa-color-orange-30);
    --wa-color-warning-20: var(--wa-color-orange-20);
    --wa-color-warning-10: var(--wa-color-orange-10);
    --wa-color-warning-05: var(--wa-color-orange-05);
    --wa-color-warning: var(--wa-color-orange);
    --wa-color-warning-on: var(--wa-color-orange-on);
  }

  .wa-warning-green {
    --wa-color-warning-95: var(--wa-color-green-95);
    --wa-color-warning-90: var(--wa-color-green-90);
    --wa-color-warning-80: var(--wa-color-green-80);
    --wa-color-warning-70: var(--wa-color-green-70);
    --wa-color-warning-60: var(--wa-color-green-60);
    --wa-color-warning-50: var(--wa-color-green-50);
    --wa-color-warning-40: var(--wa-color-green-40);
    --wa-color-warning-30: var(--wa-color-green-30);
    --wa-color-warning-20: var(--wa-color-green-20);
    --wa-color-warning-10: var(--wa-color-green-10);
    --wa-color-warning-05: var(--wa-color-green-05);
    --wa-color-warning: var(--wa-color-green);
    --wa-color-warning-on: var(--wa-color-green-on);
  }

  .wa-warning-cyan {
    --wa-color-warning-95: var(--wa-color-cyan-95);
    --wa-color-warning-90: var(--wa-color-cyan-90);
    --wa-color-warning-80: var(--wa-color-cyan-80);
    --wa-color-warning-70: var(--wa-color-cyan-70);
    --wa-color-warning-60: var(--wa-color-cyan-60);
    --wa-color-warning-50: var(--wa-color-cyan-50);
    --wa-color-warning-40: var(--wa-color-cyan-40);
    --wa-color-warning-30: var(--wa-color-cyan-30);
    --wa-color-warning-20: var(--wa-color-cyan-20);
    --wa-color-warning-10: var(--wa-color-cyan-10);
    --wa-color-warning-05: var(--wa-color-cyan-05);
    --wa-color-warning: var(--wa-color-cyan);
    --wa-color-warning-on: var(--wa-color-cyan-on);
  }

  .wa-warning-blue {
    --wa-color-warning-95: var(--wa-color-blue-95);
    --wa-color-warning-90: var(--wa-color-blue-90);
    --wa-color-warning-80: var(--wa-color-blue-80);
    --wa-color-warning-70: var(--wa-color-blue-70);
    --wa-color-warning-60: var(--wa-color-blue-60);
    --wa-color-warning-50: var(--wa-color-blue-50);
    --wa-color-warning-40: var(--wa-color-blue-40);
    --wa-color-warning-30: var(--wa-color-blue-30);
    --wa-color-warning-20: var(--wa-color-blue-20);
    --wa-color-warning-10: var(--wa-color-blue-10);
    --wa-color-warning-05: var(--wa-color-blue-05);
    --wa-color-warning: var(--wa-color-blue);
    --wa-color-warning-on: var(--wa-color-blue-on);
  }

  .wa-warning-indigo {
    --wa-color-warning-95: var(--wa-color-indigo-95);
    --wa-color-warning-90: var(--wa-color-indigo-90);
    --wa-color-warning-80: var(--wa-color-indigo-80);
    --wa-color-warning-70: var(--wa-color-indigo-70);
    --wa-color-warning-60: var(--wa-color-indigo-60);
    --wa-color-warning-50: var(--wa-color-indigo-50);
    --wa-color-warning-40: var(--wa-color-indigo-40);
    --wa-color-warning-30: var(--wa-color-indigo-30);
    --wa-color-warning-20: var(--wa-color-indigo-20);
    --wa-color-warning-10: var(--wa-color-indigo-10);
    --wa-color-warning-05: var(--wa-color-indigo-05);
    --wa-color-warning: var(--wa-color-indigo);
    --wa-color-warning-on: var(--wa-color-indigo-on);
  }

  .wa-warning-purple {
    --wa-color-warning-95: var(--wa-color-purple-95);
    --wa-color-warning-90: var(--wa-color-purple-90);
    --wa-color-warning-80: var(--wa-color-purple-80);
    --wa-color-warning-70: var(--wa-color-purple-70);
    --wa-color-warning-60: var(--wa-color-purple-60);
    --wa-color-warning-50: var(--wa-color-purple-50);
    --wa-color-warning-40: var(--wa-color-purple-40);
    --wa-color-warning-30: var(--wa-color-purple-30);
    --wa-color-warning-20: var(--wa-color-purple-20);
    --wa-color-warning-10: var(--wa-color-purple-10);
    --wa-color-warning-05: var(--wa-color-purple-05);
    --wa-color-warning: var(--wa-color-purple);
    --wa-color-warning-on: var(--wa-color-purple-on);
  }

  .wa-warning-pink {
    --wa-color-warning-95: var(--wa-color-pink-95);
    --wa-color-warning-90: var(--wa-color-pink-90);
    --wa-color-warning-80: var(--wa-color-pink-80);
    --wa-color-warning-70: var(--wa-color-pink-70);
    --wa-color-warning-60: var(--wa-color-pink-60);
    --wa-color-warning-50: var(--wa-color-pink-50);
    --wa-color-warning-40: var(--wa-color-pink-40);
    --wa-color-warning-30: var(--wa-color-pink-30);
    --wa-color-warning-20: var(--wa-color-pink-20);
    --wa-color-warning-10: var(--wa-color-pink-10);
    --wa-color-warning-05: var(--wa-color-pink-05);
    --wa-color-warning: var(--wa-color-pink);
    --wa-color-warning-on: var(--wa-color-pink-on);
  }

  .wa-warning-gray {
    --wa-color-warning-95: var(--wa-color-gray-95);
    --wa-color-warning-90: var(--wa-color-gray-90);
    --wa-color-warning-80: var(--wa-color-gray-80);
    --wa-color-warning-70: var(--wa-color-gray-70);
    --wa-color-warning-60: var(--wa-color-gray-60);
    --wa-color-warning-50: var(--wa-color-gray-50);
    --wa-color-warning-40: var(--wa-color-gray-40);
    --wa-color-warning-30: var(--wa-color-gray-30);
    --wa-color-warning-20: var(--wa-color-gray-20);
    --wa-color-warning-10: var(--wa-color-gray-10);
    --wa-color-warning-05: var(--wa-color-gray-05);
    --wa-color-warning: var(--wa-color-gray);
    --wa-color-warning-on: var(--wa-color-gray-on);
  }
}

@layer wa-color-variant {
  :where(:root), /* default */
  .wa-danger-red {
    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
    --wa-color-danger-on: var(--wa-color-red-on);
  }

  .wa-danger-orange {
    --wa-color-danger-95: var(--wa-color-orange-95);
    --wa-color-danger-90: var(--wa-color-orange-90);
    --wa-color-danger-80: var(--wa-color-orange-80);
    --wa-color-danger-70: var(--wa-color-orange-70);
    --wa-color-danger-60: var(--wa-color-orange-60);
    --wa-color-danger-50: var(--wa-color-orange-50);
    --wa-color-danger-40: var(--wa-color-orange-40);
    --wa-color-danger-30: var(--wa-color-orange-30);
    --wa-color-danger-20: var(--wa-color-orange-20);
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
    --wa-color-danger-on: var(--wa-color-orange-on);
  }

  .wa-danger-yellow {
    --wa-color-danger-95: var(--wa-color-yellow-95);
    --wa-color-danger-90: var(--wa-color-yellow-90);
    --wa-color-danger-80: var(--wa-color-yellow-80);
    --wa-color-danger-70: var(--wa-color-yellow-70);
    --wa-color-danger-60: var(--wa-color-yellow-60);
    --wa-color-danger-50: var(--wa-color-yellow-50);
    --wa-color-danger-40: var(--wa-color-yellow-40);
    --wa-color-danger-30: var(--wa-color-yellow-30);
    --wa-color-danger-20: var(--wa-color-yellow-20);
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }

  .wa-danger-green {
    --wa-color-danger-95: var(--wa-color-green-95);
    --wa-color-danger-90: var(--wa-color-green-90);
    --wa-color-danger-80: var(--wa-color-green-80);
    --wa-color-danger-70: var(--wa-color-green-70);
    --wa-color-danger-60: var(--wa-color-green-60);
    --wa-color-danger-50: var(--wa-color-green-50);
    --wa-color-danger-40: var(--wa-color-green-40);
    --wa-color-danger-30: var(--wa-color-green-30);
    --wa-color-danger-20: var(--wa-color-green-20);
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
    --wa-color-danger-on: var(--wa-color-green-on);
  }

  .wa-danger-cyan {
    --wa-color-danger-95: var(--wa-color-cyan-95);
    --wa-color-danger-90: var(--wa-color-cyan-90);
    --wa-color-danger-80: var(--wa-color-cyan-80);
    --wa-color-danger-70: var(--wa-color-cyan-70);
    --wa-color-danger-60: var(--wa-color-cyan-60);
    --wa-color-danger-50: var(--wa-color-cyan-50);
    --wa-color-danger-40: var(--wa-color-cyan-40);
    --wa-color-danger-30: var(--wa-color-cyan-30);
    --wa-color-danger-20: var(--wa-color-cyan-20);
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }

  .wa-danger-blue {
    --wa-color-danger-95: var(--wa-color-blue-95);
    --wa-color-danger-90: var(--wa-color-blue-90);
    --wa-color-danger-80: var(--wa-color-blue-80);
    --wa-color-danger-70: var(--wa-color-blue-70);
    --wa-color-danger-60: var(--wa-color-blue-60);
    --wa-color-danger-50: var(--wa-color-blue-50);
    --wa-color-danger-40: var(--wa-color-blue-40);
    --wa-color-danger-30: var(--wa-color-blue-30);
    --wa-color-danger-20: var(--wa-color-blue-20);
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
    --wa-color-danger-on: var(--wa-color-blue-on);
  }

  .wa-danger-indigo {
    --wa-color-danger-95: var(--wa-color-indigo-95);
    --wa-color-danger-90: var(--wa-color-indigo-90);
    --wa-color-danger-80: var(--wa-color-indigo-80);
    --wa-color-danger-70: var(--wa-color-indigo-70);
    --wa-color-danger-60: var(--wa-color-indigo-60);
    --wa-color-danger-50: var(--wa-color-indigo-50);
    --wa-color-danger-40: var(--wa-color-indigo-40);
    --wa-color-danger-30: var(--wa-color-indigo-30);
    --wa-color-danger-20: var(--wa-color-indigo-20);
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }

  .wa-danger-purple {
    --wa-color-danger-95: var(--wa-color-purple-95);
    --wa-color-danger-90: var(--wa-color-purple-90);
    --wa-color-danger-80: var(--wa-color-purple-80);
    --wa-color-danger-70: var(--wa-color-purple-70);
    --wa-color-danger-60: var(--wa-color-purple-60);
    --wa-color-danger-50: var(--wa-color-purple-50);
    --wa-color-danger-40: var(--wa-color-purple-40);
    --wa-color-danger-30: var(--wa-color-purple-30);
    --wa-color-danger-20: var(--wa-color-purple-20);
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
    --wa-color-danger-on: var(--wa-color-purple-on);
  }

  .wa-danger-pink {
    --wa-color-danger-95: var(--wa-color-pink-95);
    --wa-color-danger-90: var(--wa-color-pink-90);
    --wa-color-danger-80: var(--wa-color-pink-80);
    --wa-color-danger-70: var(--wa-color-pink-70);
    --wa-color-danger-60: var(--wa-color-pink-60);
    --wa-color-danger-50: var(--wa-color-pink-50);
    --wa-color-danger-40: var(--wa-color-pink-40);
    --wa-color-danger-30: var(--wa-color-pink-30);
    --wa-color-danger-20: var(--wa-color-pink-20);
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
    --wa-color-danger-on: var(--wa-color-pink-on);
  }

  .wa-danger-gray {
    --wa-color-danger-95: var(--wa-color-gray-95);
    --wa-color-danger-90: var(--wa-color-gray-90);
    --wa-color-danger-80: var(--wa-color-gray-80);
    --wa-color-danger-70: var(--wa-color-gray-70);
    --wa-color-danger-60: var(--wa-color-gray-60);
    --wa-color-danger-50: var(--wa-color-gray-50);
    --wa-color-danger-40: var(--wa-color-gray-40);
    --wa-color-danger-30: var(--wa-color-gray-30);
    --wa-color-danger-20: var(--wa-color-gray-20);
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
}



/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {
  /**
    * Conditional tokens to check if the key color is >= 60
    * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
    * The numeric value of the key is isolated as --wa-color-{hue}-key
    * If key < 60, the result is 0%
    * If key >= 60, the result is 100%
    * Intended to be used in the color-mix() functions below
    */

  --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
  --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
  --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
  --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
  --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
  --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
  --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
  --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
  --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
  --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));

  /**
    * Tokens to set text color with appropriate WCAG 2.1 contrast
    * If key < 60, the text color is white
    * If key >= 60, the text color is {hue}-10
    */

  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}


@layer wa-color-palette {
  .wa-palette-natural {
    --wa-color-red-95: #f9f0ee /* oklch(96.159% 0.0101 32.516) */;
    --wa-color-red-90: #f5e1dc /* oklch(92.449% 0.0231 34.298) */;
    --wa-color-red-80: #e9c1b7 /* oklch(84.299% 0.04808 34.353) */;
    --wa-color-red-70: #daa193 /* oklch(75.915% 0.07123 34.238) */;
    --wa-color-red-60: #c48576 /* oklch(67.655% 0.08143 33.955) */;
    --wa-color-red-50: #a86252 /* oklch(57.121% 0.09478 33.75) */;
    --wa-color-red-40: #864839 /* oklch(47.352% 0.08833 34.595) */;
    --wa-color-red-30: #6f3428 /* oklch(40.073% 0.08669 32.867) */;
    --wa-color-red-20: #562318 /* oklch(32.765% 0.07872 33.646) */;
    --wa-color-red-10: #36130b /* oklch(23.996% 0.05851 34.254) */;
    --wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-orange-95: #f9f2ed /* oklch(96.52% 0.01008 58.217) */;
    --wa-color-orange-90: #f4e3d6 /* oklch(92.595% 0.02556 59.903) */;
    --wa-color-orange-80: #e6c3aa /* oklch(84.087% 0.05242 57.474) */;
    --wa-color-orange-70: #d3a685 /* oklch(75.824% 0.06976 57.703) */;
    --wa-color-orange-60: #bf8962 /* oklch(67.428% 0.08515 56.553) */;
    --wa-color-orange-50: #a26839 /* oklch(57.025% 0.09733 58.071) */;
    --wa-color-orange-40: #824b20 /* oklch(46.959% 0.09366 55.634) */;
    --wa-color-orange-30: #683a17 /* oklch(39.855% 0.08077 54.814) */;
    --wa-color-orange-20: #4d2a0e /* oklch(32.469% 0.06563 55.984) */;
    --wa-color-orange-10: #301705 /* oklch(23.621% 0.04968 54.306) */;
    --wa-color-orange-05: #1f0e03 /* oklch(18.572% 0.03671 56.067) */;
    --wa-color-orange: var(--wa-color-orange-50);
    --wa-color-orange-key: 50;

    --wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
    --wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
    --wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;
    --wa-color-yellow-70: #c7ab7b /* oklch(75.433% 0.07174 80.723) */;
    --wa-color-yellow-60: #af905b /* oklch(66.983% 0.07981 80.152) */;
    --wa-color-yellow-50: #8f703a /* oklch(56.392% 0.08172 79.742) */;
    --wa-color-yellow-40: #71541d /* oklch(46.546% 0.08061 80.169) */;
    --wa-color-yellow-30: #5b4111 /* oklch(39.475% 0.07191 78.67) */;
    --wa-color-yellow-20: #442f00 /* oklch(32.136% 0.06628 81.612) */;
    --wa-color-yellow-10: #2a1b00 /* oklch(23.521% 0.04872 79.998) */;
    --wa-color-yellow-05: #1b1000 /* oklch(18.327% 0.03796 79.944) */;
    --wa-color-yellow: var(--wa-color-yellow-50);
    --wa-color-yellow-key: 50;

    --wa-color-green-95: #edf2ee /* oklch(95.624% 0.00749 151.89) */;
    --wa-color-green-90: #dde8df /* oklch(92.017% 0.01681 151.09) */;
    --wa-color-green-80: #b8cebc /* oklch(82.98% 0.03436 150.75) */;
    --wa-color-green-70: #98b79e /* oklch(74.921% 0.04904 150.76) */;
    --wa-color-green-60: #779e7f /* oklch(66.161% 0.06262 150.64) */;
    --wa-color-green-50: #53805d /* oklch(55.706% 0.07344 150.47) */;
    --wa-color-green-40: #366241 /* oklch(45.446% 0.07294 150.68) */;
    --wa-color-green-30: #264d31 /* oklch(38.285% 0.06543 151.38) */;
    --wa-color-green-20: #193922 /* oklch(31.279% 0.05615 151.11) */;
    --wa-color-green-10: #0c2212 /* oklch(22.839% 0.04191 150.74) */;
    --wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
    --wa-color-green: var(--wa-color-green-50);
    --wa-color-green-key: 50;

    --wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
    --wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
    --wa-color-cyan-80: #b8cdd1 /* oklch(83.375% 0.02342 210.4) */;
    --wa-color-cyan-70: #96b4ba /* oklch(74.946% 0.03385 211.12) */;
    --wa-color-cyan-60: #759ba2 /* oklch(66.386% 0.0429 210.11) */;
    --wa-color-cyan-50: #4a7d86 /* oklch(55.736% 0.05643 209.98) */;
    --wa-color-cyan-40: #2f6067 /* oklch(45.783% 0.05405 207.62) */;
    --wa-color-cyan-30: #1e4c52 /* oklch(38.743% 0.05069 206.89) */;
    --wa-color-cyan-20: #0c383e /* oklch(31.452% 0.04725 208.21) */;
    --wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
    --wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
    --wa-color-cyan: var(--wa-color-cyan-50);
    --wa-color-cyan-key: 50;

    --wa-color-blue-95: #f0f2f6 /* oklch(96.077% 0.00576 264.53) */;
    --wa-color-blue-90: #e0e5ef /* oklch(92.101% 0.0146 264.5) */;
    --wa-color-blue-80: #c0cbde /* oklch(83.957% 0.02915 261.47) */;
    --wa-color-blue-70: #9fb0ca /* oklch(75.271% 0.04205 258.8) */;
    --wa-color-blue-60: #8196b8 /* oklch(66.901% 0.05611 259.98) */;
    --wa-color-blue-50: #5c76a0 /* oklch(56.262% 0.07235 259.79) */;
    --wa-color-blue-40: #425981 /* oklch(46.327% 0.07137 261.08) */;
    --wa-color-blue-30: #2f466a /* oklch(39.269% 0.06791 259.08) */;
    --wa-color-blue-20: #203351 /* oklch(32.043% 0.05935 259.22) */;
    --wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
    --wa-color-blue-05: #081224 /* oklch(18.37% 0.04003 261.12) */;
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;

    --wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
    --wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
    --wa-color-indigo-80: #c7c6df /* oklch(83.517% 0.03466 287.46) */;
    --wa-color-indigo-70: #aeabcf /* oklch(75.572% 0.05131 288.93) */;
    --wa-color-indigo-60: #9490bd /* oklch(67.3% 0.06608 288.56) */;
    --wa-color-indigo-50: #7670a3 /* oklch(57.087% 0.07793 289.07) */;
    --wa-color-indigo-40: #595383 /* oklch(46.888% 0.07683 288.8) */;
    --wa-color-indigo-30: #46406a /* oklch(39.689% 0.06998 289.36) */;
    --wa-color-indigo-20: #332e50 /* oklch(32.318% 0.05957 289.37) */;
    --wa-color-indigo-10: #1e1a32 /* oklch(23.531% 0.04547 290.1) */;
    --wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;

    --wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
    --wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
    --wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
    --wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
    --wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
    --wa-color-purple-50: #866a99 /* oklch(56.923% 0.07763 311.15) */;
    --wa-color-purple-40: #694f7a /* oklch(47.198% 0.07429 311.36) */;
    --wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
    --wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
    --wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
    --wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;

    --wa-color-pink-95: #f8f0f3 /* oklch(96.22% 0.00943 352.36) */;
    --wa-color-pink-90: #f0e2e7 /* oklch(92.534% 0.0166 353.65) */;
    --wa-color-pink-80: #dec3ce /* oklch(84.312% 0.03375 351.3) */;
    --wa-color-pink-70: #cba4b4 /* oklch(75.858% 0.05043 351.83) */;
    --wa-color-pink-60: #b9879c /* oklch(67.84% 0.06707 352.09) */;
    --wa-color-pink-50: #a0637d /* oklch(57.443% 0.08557 353.01) */;
    --wa-color-pink-40: #7f4860 /* oklch(47.455% 0.08107 352.99) */;
    --wa-color-pink-30: #67364c /* oklch(40.225% 0.07544 352.68) */;
    --wa-color-pink-20: #4f2538 /* oklch(32.865% 0.06781 352.99) */;
    --wa-color-pink-10: #311422 /* oklch(23.991% 0.05118 351.37) */;
    --wa-color-pink-05: #200b15 /* oklch(18.69% 0.03937 351.69) */;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;

    --wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
    --wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
    --wa-color-gray-80: #cac8c3 /* oklch(83.296% 0.00723 88.651) */;
    --wa-color-gray-70: #b2afa8 /* oklch(75.445% 0.01044 87.487) */;
    --wa-color-gray-60: #98958c /* oklch(66.972% 0.01348 91.575) */;
    --wa-color-gray-50: #7a766a /* oklch(56.579% 0.01864 91.662) */;
    --wa-color-gray-40: #5c594f /* oklch(46.366% 0.0162 93.155) */;
    --wa-color-gray-30: #49453e /* oklch(39.205% 0.01273 81.754) */;
    --wa-color-gray-20: #35322d /* oklch(31.85% 0.00968 80.663) */;
    --wa-color-gray-10: #1f1d1a /* oklch(23.185% 0.00644 78.196) */;
    --wa-color-gray-05: #131210 /* oklch(18.257% 0.00432 84.592) */;
    --wa-color-gray: var(--wa-color-gray-50);
    --wa-color-gray-key: 50;
  }
}


 /* To use this palette, add class="wa-palette-natural" to the <html> element */
/* refused third-party import: https://fonts.bunny.net/css?family=lora:400,400i,500,500i,600,600i,700,700i|mulish:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap */

@layer wa-theme {
  .wa-theme-mellow,
  .wa-theme-mellow.wa-light,
  .wa-theme-mellow .wa-light,
  .wa-theme-mellow.wa-dark .wa-invert,
  .wa-theme-mellow .wa-dark .wa-invert,
  .wa-light .wa-theme-mellow,
  .wa-dark .wa-theme-mellow.wa-invert,
  .wa-dark .wa-theme-mellow .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: var(--wa-color-neutral-95);
    --wa-color-surface-lowered: var(--wa-color-neutral-90);
    --wa-color-surface-border: color-mix(
      in oklab,
      var(--wa-color-neutral-80),
      transparent
    );

    --wa-color-text-normal: var(--wa-color-neutral-20);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-neutral-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-neutral-80) 25%,
      transparent
    );

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );

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

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-90);
    --wa-color-brand-fill-normal: var(--wa-color-brand-80);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-80);
    --wa-color-brand-border-normal: var(--wa-color-brand-70);
    --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-success-90);
    --wa-color-success-fill-normal: var(--wa-color-success-80);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-80);
    --wa-color-success-border-normal: var(--wa-color-success-70);
    --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-90);
    --wa-color-warning-fill-normal: var(--wa-color-warning-80);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-80);
    --wa-color-warning-border-normal: var(--wa-color-warning-70);
    --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-90);
    --wa-color-danger-fill-normal: var(--wa-color-danger-80);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-80);
    --wa-color-danger-border-normal: var(--wa-color-danger-70);
    --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-90);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-70);
    --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;
    /* #endregion */
  }

  .wa-theme-mellow.wa-dark,
  .wa-theme-mellow .wa-dark,
  .wa-theme-mellow.wa-invert,
  .wa-theme-mellow .wa-invert,
  .wa-dark .wa-theme-mellow,
  .wa-light .wa-theme-mellow.wa-invert,
  .wa-light .wa-theme-mellow .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-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-30),
      transparent
    );

    --wa-color-text-normal: var(--wa-color-brand-90);
    --wa-color-text-quiet: var(--wa-color-neutral-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-neutral-50) 10%,
      transparent
    );

    --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: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;

    --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);
    --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-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);
    /* #endregion */
  }

  .wa-theme-mellow,
  .wa-theme-mellow.wa-light,
  .wa-theme-mellow .wa-light,
  .wa-theme-mellow.wa-dark,
  .wa-theme-mellow .wa-dark,
  .wa-theme-mellow.wa-invert,
  .wa-theme-mellow .wa-invert {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: "Mulish", sans-serif;
    --wa-font-family-heading: "Lora", serif;
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: "Lora", serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(
      calc(var(--wa-font-size-2xs) / 1.125),
      1px
    ); /* 10px */
    --wa-font-size-2xs: round(
      calc(var(--wa-font-size-xs) / 1.125),
      1px
    ); /* 11px */
    --wa-font-size-xs: round(
      calc(var(--wa-font-size-s) / 1.125),
      1px
    ); /* 12px */
    --wa-font-size-s: round(
      calc(var(--wa-font-size-m) / 1.125),
      1px
    ); /* 14px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
    --wa-font-size-l: round(
      calc(var(--wa-font-size-m) * 1.125 * 1.125),
      1px
    ); /* 20px */
    --wa-font-size-xl: round(
      calc(var(--wa-font-size-l) * 1.125 * 1.125),
      1px
    ); /* 25px */
    --wa-font-size-2xl: round(
      calc(var(--wa-font-size-xl) * 1.125 * 1.125),
      1px
    ); /* 32px */
    --wa-font-size-3xl: round(
      calc(var(--wa-font-size-2xl) * 1.125 * 1.125),
      1px
    ); /* 41px */
    --wa-font-size-4xl: round(
      calc(var(--wa-font-size-3xl) * 1.125 * 1.125),
      1px
    ); /* 52px */
    --wa-font-size-5xl: round(
      calc(var(--wa-font-size-4xl) * 1.125 * 1.125),
      1px
    ); /* 66px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;

    --wa-link-decoration-default: underline
      color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1.125;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 90px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1.5;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.25rem; /* 4px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
      var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 0;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 1;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: -0.5;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s)
      var(--wa-shadow-blur-s) var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m)
      var(--wa-shadow-blur-m) var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l)
      var(--wa-shadow-blur-l) var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: "*";
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(
        2 * var(--wa-form-control-padding-block) + 1em *
          var(--wa-form-control-value-line-height)
      ),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: none;
    --wa-button-transform-active: scale(0.9875);

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }
}

@layer wa-theme-overrides {
  .wa-theme-mellow {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      letter-spacing: calc(1em * -0.02);
    }

    wa-callout {
      border-width: var(--wa-panel-border-width) var(--wa-panel-border-width)
        var(--wa-panel-border-width) calc(var(--wa-panel-border-width) * 4);
    }

    wa-card::part(header) {
      border-bottom-style: dotted;
    }
    wa-card::part(footer) {
      border-top-style: dotted;
    }

    input[type="radio"],
    wa-radio {
      --checked-icon-scale: 0.6;
    }
  }
}

/* ---------------------------------------------------------------------------
   The site's `site-base` layer.

   Not Web Awesome's, despite the directory: this is the one layer of the site's
   own CSS that cannot come out of `app.scss`. Sass has no way to put a module
   tree inside a cascade layer, so `app.scss` is wrapped in `@layer site`
   wholesale by `src/assets/compile-sass.ts`, and `site` is the last layer of
   all. What goes here is the CSS that has to beat `wa-native` and lose to
   everything else, which is a different position in the order and therefore a
   different file.

   Everything below is a deliberate correction to `wa-native`, which restyles
   around 200 bare-element selectors and lands on 13,883 pages of Goldmark prose
   at once. The site keeps its current look, so where the two disagree about an
   element the site already draws, the site wins. Where `wa-native` styles
   something the site never had an opinion about, it is left alone: that is what
   the floor is for.

   Each rule below names what it corrects and what it looked like without it.
   Nothing goes in here that has not been seen on a real page.
   --------------------------------------------------------------------------- */

@layer site-base {
  /* `native.css` sets `li { margin-inline-start: 1.125em }`, and the site's
     lists are indented by Bootstrap's `ol, ul { padding-left: 2rem }` already,
     so this was an indent on top of an indent. Measured on the grammar page it
     moved 66 list items: every breadcrumb chip, every item along the
     navigation bar, every article card in the rail and every bullet in the
     prose, and it pushed the rail's own lists wide enough to wrap. It is the
     single largest thing `wa-native` does to this site. */
  li {
    margin-inline-start: 0;
  }

  /* Form controls, and the disclosure, keep the browser's own appearance for
     now.

     `native.css` redraws every one of them, and the site's controls were
     written against the browser's defaults rather than against Web Awesome's.
     Measured on the conversion tools, the collision is not subtle: the twenty-
     two radios that the tool hides behind their own labels came back as 3px
     dots with a border and a 50% radius, every label went to 600 and lost a
     third of its line height, each fieldset grew a corner radius, the settings
     disclosure turned into a grey panel with an 18px ledge under its summary,
     and every button became a flex container. The copy button beside an
     example sentence went from 30px tall to 49px, on 13,183 sentence pages and
     every grammar article.

     `revert` rather than a list of properties, because the list would be
     wrong: it rolls each property back to the browser's value **only where
     the site does not set one itself**, since anything in `site` outranks this
     layer. So Bootstrap's form control styling, the tools' own controls and
     the copy buttons all keep exactly what they had, and nothing else picks up
     a look nobody chose.

     This is the rule that phase 14 deletes, one control at a time, as the
     tools are ported. Until then it is the difference between a floor and a
     redesign of every form on the site. */
  button,
  input,
  select,
  textarea,
  label,
  fieldset,
  legend,
  progress,
  details,
  summary {
    all: revert;
  }

  /* The site's blockquotes are a serif indent with real quotation marks on the
     first paragraph, and nothing else. `native.css` adds `--wa-space-xl` of
     padding on all four sides, a 4.5px rule down the leading edge and the
     quiet text colour, which took one on a blog post from 64px tall to 146px
     and changed what it is: an indent that reads as the writer quoting
     somebody became a callout. The face and the size in the same rule are
     already the site's, which is why only these three are here. */
  blockquote {
    padding: 0;
    border-inline-start: 0;
    color: inherit;
  }

  /* `native.css` rounds every `<img>` to `--wa-border-radius-m`, which is
     right for a photograph in an article and wrong for this one: the mark
     draws its own square blue frame, so the radius was taking the corners off
     it. Scoped to the mark rather than applied to every image, deliberately.
     See the same correction in the reference page. */
  .navbar-brand img {
    border-radius: 0;
  }
}

@layer wa-theme-overrides {
@media (prefers-color-scheme: dark) {
:root:not(.wa-light) {
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-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-30),
      transparent
    );

    --wa-color-text-normal: var(--wa-color-brand-90);
    --wa-color-text-quiet: var(--wa-color-neutral-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-neutral-50) 10%,
      transparent
    );

    --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: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;

    --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);
    --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-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);
    /* #endregion */
}
}
}