@import url('../color/rudimentary.css');
@import url('default/color-semantic.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root,
:host,
.wa-theme-active,
.wa-light {
  color-scheme: light;
  color: var(--wa-color-text-normal);

  /**
   * Foundational Colors
   */
  --wa-color-text-normal: var(--wa-color-gray-05);
  --wa-color-text-link: var(--wa-color-green-40);

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

  --wa-color-mix-hover: white 10%;
  --wa-color-mix-active: black 5%;

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

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

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

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

  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
  --wa-color-neutral-fill-loud: var(--wa-color-gray-80);
  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
  --wa-color-neutral-border-loud: var(--wa-color-gray-70);
  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
  --wa-color-neutral-on-loud: black;

  /**
   * Typography
   */
  --wa-font-family-body: 'Inter', sans-serif;

  --wa-font-weight-semibold: 550;
  --wa-font-weight-bold: 650;

  /**
   * Rounding
   */
  --wa-border-radius-scale: 2;

  /**
   * Component Groups
   */
  --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}

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

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

  --wa-color-text-normal: var(--wa-color-gray-95);
  --wa-color-text-quiet: var(--wa-color-gray-60);
  --wa-color-text-link: var(--wa-color-green-70);

  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);

  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);

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

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

  /**
   * Semantic Colors
   */
  --wa-color-brand-fill-quiet: var(--wa-color-green-10);
  --wa-color-brand-fill-normal: var(--wa-color-green-20);
  --wa-color-brand-fill-loud: var(--wa-color-green-80);
  --wa-color-brand-border-quiet: var(--wa-color-green-20);
  --wa-color-brand-border-normal: var(--wa-color-green-30);
  --wa-color-brand-border-loud: var(--wa-color-green-60);
  --wa-color-brand-on-quiet: var(--wa-color-green-80);
  --wa-color-brand-on-normal: var(--wa-color-green-90);
  --wa-color-brand-on-loud: black;

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

  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
  --wa-color-warning-fill-loud: var(--wa-color-yellow-80);
  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
  --wa-color-warning-on-quiet: var(--wa-color-yellow-80);
  --wa-color-warning-on-normal: var(--wa-color-yellow-90);
  --wa-color-warning-on-loud: black;

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

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

/**
 * Component Styles
 */
:root {
  --wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
  --wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
    inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
    inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
}

:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
    [appearance='plain'],
    .wa-plain
  ) {
  box-shadow: var(--wa-theme-active-shadow-pop-out);

  &:not([disabled], [loading]):active {
    box-shadow: var(--wa-theme-active-shadow-punch-in);
  }
}

wa-card {
  box-shadow: var(--wa-theme-active-shadow-pop-out);
}

input:not([type='button'], [type='reset'], [type='submit'], :checked),
select,
textarea,
:is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
wa-input,
wa-select,
wa-textarea {
  &:not([appearance='filled']):not([disabled]) {
    --box-shadow: inset var(--wa-shadow-s);
  }
}

input[type='radio'],
wa-radio {
  --background-color-checked: var(--wa-form-control-activated-color);
  --checked-icon-color: var(--wa-color-brand-on-loud);
  --checked-icon-scale: 0.4;
}

input[type='range'],
wa-slider,
wa-switch {
  --thumb-shadow: var(--wa-theme-active-shadow-pop-out);
}

wa-progress-bar {
  box-shadow: inset var(--wa-shadow-s);

  &::part(indicator) {
    box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
  }
}