@import url('../lib/webawesome/styles/layers.css');

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

    --wa-color-surface-border: var(--wa-color-neutral-80);

    --wa-color-mix-hover: black 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 5%;

    --wa-color-brand-fill-loud: var(--wa-color-brand-80);
    --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-50);
    --wa-color-brand-on-loud: var(--wa-color-brand-10);

    --wa-color-success-fill-loud: var(--wa-color-success-80);
    --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-50);
    --wa-color-success-on-loud: var(--wa-color-success-10);

    --wa-color-warning-fill-loud: var(--wa-color-warning-80);
    --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-50);
    --wa-color-warning-on-loud: var(--wa-color-warning-10);

    --wa-color-danger-fill-loud: var(--wa-color-danger-70);
    --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-50);
    --wa-color-danger-on-loud: var(--wa-color-danger-10);

    --wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
    --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-50);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-95);
    /* #endregion */
  }

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

    --wa-color-surface-raised: var(--wa-color-neutral-30);
    --wa-color-surface-default: var(--wa-color-neutral-20);
    --wa-color-surface-lowered: var(--wa-color-neutral-10);
    --wa-color-surface-border: var(--wa-color-neutral-30);

    --wa-color-text-quiet: var(--wa-color-neutral-80);
    --wa-color-text-link: var(--wa-color-brand-80);

    --wa-color-mix-hover: white 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-30);
    --wa-color-brand-fill-normal: var(--wa-color-brand-40);
    --wa-color-brand-fill-loud: var(--wa-color-brand-70);
    --wa-color-brand-border-quiet: var(--wa-color-brand-30);
    --wa-color-brand-border-normal: var(--wa-color-brand-40);
    --wa-color-brand-border-loud: var(--wa-color-brand-70);
    --wa-color-brand-on-quiet: var(--wa-color-brand-80);
    --wa-color-brand-on-normal: var(--wa-color-brand-90);
    --wa-color-brand-on-loud: var(--wa-color-brand-10);

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

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

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

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-40);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-70);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
    /* #endregion */
  }

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

    /* #region Colors (Palette) ~~~~~~~~~~~~~~~~~ */
    --wa-color-brand-05: #020f18;
    --wa-color-brand-10: #041826;
    --wa-color-brand-20: #07283c;
    --wa-color-brand-30: #0a324a;
    --wa-color-brand-40: #0f4460;
    --wa-color-brand-50: #165473;
    --wa-color-brand-60: #1d5d7e;
    --wa-color-brand-70: #2297cd;
    --wa-color-brand-80: #78c4e5;
    --wa-color-brand-90: #b5e2f3;
    --wa-color-brand-95: #d8f1fa;
    --wa-color-brand: #0e3e55;
    --wa-color-brand-on: #d8f1fa;

    --wa-color-danger-05: #340000;
    --wa-color-danger-10: #490000;
    --wa-color-danger-20: #6e0000;
    --wa-color-danger-30: #871714;
    --wa-color-danger-40: #a0322a;
    --wa-color-danger-50: #c45348;
    --wa-color-danger-60: #e77265;
    --wa-color-danger-70: #ff8b7d;
    --wa-color-danger-80: #ffb1a5;
    --wa-color-danger-90: #ffd8d0;
    --wa-color-danger-95: #ffeae5;
    --wa-color-danger: #ff8b7d;
    --wa-color-danger-on: #490000;

    --wa-color-neutral-05: #13110e;
    --wa-color-neutral-10: #1d1a16;
    --wa-color-neutral-20: #353026;
    --wa-color-neutral-30: #484237;
    --wa-color-neutral-40: #5a5449;
    --wa-color-neutral-50: #767062;
    --wa-color-neutral-60: #8a8477;
    --wa-color-neutral-70: #a39d91;
    --wa-color-neutral-80: #bdb7ab;
    --wa-color-neutral-90: #ddd7cb;
    --wa-color-neutral-95: #eee8dc;
    --wa-color-neutral: #6b6557;
    --wa-color-neutral-on: #eee8dc;

    --wa-color-success-05: #001a01;
    --wa-color-success-10: #002604;
    --wa-color-success-20: #003f11;
    --wa-color-success-30: #005223;
    --wa-color-success-40: #056433;
    --wa-color-success-50: #338451;
    --wa-color-success-60: #54a46e;
    --wa-color-success-70: #6ebe87;
    --wa-color-success-80: #88d8a0;
    --wa-color-success-90: #a6f7be;
    --wa-color-success-95: #b3ffcb;
    --wa-color-success: #6ebe87;
    --wa-color-success-on: #002604;

    --wa-color-warning-05: #2a1000;
    --wa-color-warning-10: #3d1a00;
    --wa-color-warning-20: #642f00;
    --wa-color-warning-30: #844300;
    --wa-color-warning-40: #a75a00;
    --wa-color-warning-50: #c97300;
    --wa-color-warning-60: #e88a19;
    --wa-color-warning-70: #fca038;
    --wa-color-warning-80: #ffc17f;
    --wa-color-warning-90: #ffe0bf;
    --wa-color-warning-95: #ffefdb;
    --wa-color-warning: #fc860a;
    --wa-color-warning-on: #3d1a00;
    /* #endregion */

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: Inter, sans-serif;
    --wa-font-family-heading: Inter, sans-serif;
    --wa-font-family-longform: Inter, sans-serif;

    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;

    --wa-line-height-condensed: 1.1;
    --wa-line-height-normal: 1.5;

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

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-width-scale: 1.5;
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 0.5;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: transparent;
    --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
    --wa-form-control-toggle-size: round(1.5em, 1px);
    /* #endregion */
  }
}

@layer wa-theme-overrides {
  .wa-theme-canfield {
    wa-rating {
      --symbol-color-active: var(--wa-color-text-quiet);
    }

    wa-button::part(label),
    button,
    input:where([type='button'], [type='reset'], [type='submit']),
    a.wa-button{
      text-transform: uppercase;
    }

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

    input[type='checkbox'],
    wa-checkbox,
    wa-tree-item::part(checkbox__control) {
      --checked-icon-color: var(--wa-color-surface-default);
    }

    wa-badge,
    wa-tag {
      text-transform: uppercase;
    }

    wa-radio,
    input[type='radio'] {
      --checked-icon-color: var(--wa-color-surface-default);
      --checked-icon-scale: 0.4;

      &:checked,
      &:state(checked)::part(control) {
        background-color: var(--wa-form-control-activated-color);
      }
    }
  }
}