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

@layer wa-theme {
  .wa-theme-ars,
  .wa-theme-ars.wa-light,
  .wa-theme-ars .wa-light,
  .wa-light .wa-theme-ars {
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: #f7f3f3;
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand);

    --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-60);
    --wa-color-mix-hover: black 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --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-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --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: var(--wa-color-warning-10);

    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --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-surface-raised);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --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;
  }

  .wa-theme-ars,
  .wa-theme-ars.wa-light,
  .wa-theme-ars .wa-light {
    font-family: var(--wa-font-family-body);

    --wa-color-brand-05: #260505;
    --wa-color-brand-10: #39080a;
    --wa-color-brand-20: #5c0c12;
    --wa-color-brand-30: #901420;
    --wa-color-brand-40: #a2021e;
    --wa-color-brand-50: #be1e2d;
    --wa-color-brand-60: #df4b4e;
    --wa-color-brand-70: #f47b77;
    --wa-color-brand-80: #ffaba5;
    --wa-color-brand-90: #ffd6d3;
    --wa-color-brand-95: #ffedec;
    --wa-color-brand: #be1e2d;
    --wa-color-brand-on: white;

    --wa-color-danger-05: #280204;
    --wa-color-danger-10: #3d0307;
    --wa-color-danger-20: #60020e;
    --wa-color-danger-30: #800316;
    --wa-color-danger-40: #a7031f;
    --wa-color-danger-50: #cf0228;
    --wa-color-danger-60: #f2283b;
    --wa-color-danger-70: #fe716f;
    --wa-color-danger-80: #feaba5;
    --wa-color-danger-90: #fed6d3;
    --wa-color-danger-95: #ffedeb;
    --wa-color-danger: #f2283b;
    --wa-color-danger-on: #280204;

    --wa-color-neutral-05: #141213;
    --wa-color-neutral-10: #231f20;
    --wa-color-neutral-20: #383435;
    --wa-color-neutral-30: #4d494a;
    --wa-color-neutral-40: #625e5f;
    --wa-color-neutral-50: #7f7a7b;
    --wa-color-neutral-60: #9b9b9b;
    --wa-color-neutral-70: #b5b2b2;
    --wa-color-neutral-80: #cdcbcc;
    --wa-color-neutral-90: #e8e6e7;
    --wa-color-neutral-95: #f4f4f4;
    --wa-color-neutral: #231f20;
    --wa-color-neutral-on: white;

    --wa-color-success-05: #031608;
    --wa-color-success-10: #052310;
    --wa-color-success-20: #0a3a1d;
    --wa-color-success-30: #0a5027;
    --wa-color-success-40: #036730;
    --wa-color-success-50: #00883c;
    --wa-color-success-60: #00ac49;
    --wa-color-success-70: #5dc36f;
    --wa-color-success-80: #93da98;
    --wa-color-success-90: #c2f2c1;
    --wa-color-success-95: #e3f9e3;
    --wa-color-success: #00ac49;
    --wa-color-success-on: #052310;

    --wa-color-warning-05: #220c00;
    --wa-color-warning-10: #331600;
    --wa-color-warning-20: #532600;
    --wa-color-warning-30: #6f3601;
    --wa-color-warning-40: #8c4602;
    --wa-color-warning-50: #b45f04;
    --wa-color-warning-60: #da7e00;
    --wa-color-warning-70: #ef9d00;
    --wa-color-warning-80: #fac22b;
    --wa-color-warning-90: #ffe495;
    --wa-color-warning-95: #fef3cd;
    --wa-color-warning: #fac22b;
    --wa-color-warning-on: #331600;

    --wa-font-family-body: 'Mulish', sans-serif;
    --wa-font-family-heading: 'Orbitron', sans-serif;
    --wa-font-family-longform: 'Mulish', sans-serif;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;
    --wa-font-weight-heading: 500;
    --wa-line-height-normal: 1.5;
    --wa-panel-border-radius: calc(var(--wa-border-radius-l) * 1.333333);
  }

}