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

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope/Manrope-latin.woff2') format('woff2');
}

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

    --wa-color-surface-raised: var(--sg-color-off-white);
    --wa-color-surface-default: var(--sg-color-off-white);
    --wa-color-surface-lowered: var(--sg-color-light-gray);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--sg-color-deep-slate);
    --wa-color-text-quiet: var(--sg-color-slate-gray);
    --wa-color-text-link: var(--sg-color-steel-blue);

    --wa-color-overlay-modal: color-mix(in oklab, var(--sg-color-deep-slate) 64%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--sg-color-steel-blue) 18%, transparent);

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

    --wa-color-focus: var(--sg-color-bright-lime);

    --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-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --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-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-30);
    --wa-color-brand-on-normal: var(--wa-color-brand-20);
    --wa-color-brand-on-loud: var(--sg-color-off-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-40);
    --wa-color-success-on-quiet: var(--wa-color-success-30);
    --wa-color-success-on-normal: var(--wa-color-success-20);
    --wa-color-success-on-loud: var(--sg-color-deep-slate);

    --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-50);
    --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-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-30);
    --wa-color-warning-on-normal: var(--wa-color-warning-20);
    --wa-color-warning-on-loud: var(--sg-color-deep-slate);

    --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-40);
    --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-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-30);
    --wa-color-danger-on-normal: var(--wa-color-danger-20);
    --wa-color-danger-on-loud: var(--sg-color-off-white);

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
    --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-50);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-on-loud: var(--sg-color-off-white);
  }

  .wa-theme-surfacegrade.wa-dark,
  .wa-theme-surfacegrade .wa-dark,
  .wa-theme-surfacegrade.wa-invert,
  .wa-theme-surfacegrade .wa-invert,
  .wa-dark .wa-theme-surfacegrade,
  .wa-light .wa-theme-surfacegrade.wa-invert,
  .wa-light .wa-theme-surfacegrade .wa-invert {
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-20);
    --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: var(--wa-color-neutral-20);

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

    --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(--sg-color-bright-lime);

    --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-70);
    --wa-color-brand-on-normal: var(--wa-color-brand-80);
    --wa-color-brand-on-loud: var(--sg-color-off-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-70);
    --wa-color-success-on-normal: var(--wa-color-success-80);
    --wa-color-success-on-loud: var(--sg-color-deep-slate);

    --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-70);
    --wa-color-warning-on-normal: var(--wa-color-warning-80);
    --wa-color-warning-on-loud: var(--sg-color-deep-slate);

    --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-40);
    --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-70);
    --wa-color-danger-on-normal: var(--wa-color-danger-80);
    --wa-color-danger-on-loud: var(--sg-color-off-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-70);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
  }

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

    --sg-color-deep-slate: #122124;
    --sg-color-charcoal: #203132;
    --sg-color-steel-blue: #415A62;
    --sg-color-surface-green: #94CE3A;
    --sg-color-bright-lime: #A9E93C;
    --sg-color-light-gray: #E8ECEC;
    --sg-color-off-white: #F8FAFB;
    --sg-color-slate-gray: #6A747A;

    --wa-color-brand-05: #122124;
    --wa-color-brand-10: #182B30;
    --wa-color-brand-20: #20383F;
    --wa-color-brand-30: #2B4850;
    --wa-color-brand-40: #36555E;
    --wa-color-brand-50: #415A62;
    --wa-color-brand-60: #607982;
    --wa-color-brand-70: #859AA1;
    --wa-color-brand-80: #B6C4C8;
    --wa-color-brand-90: #DDE6E8;
    --wa-color-brand-95: #F1F6F7;
    --wa-color-brand: var(--sg-color-steel-blue);
    --wa-color-brand-on: var(--sg-color-off-white);

    --wa-color-neutral-05: #122124;
    --wa-color-neutral-10: #17282B;
    --wa-color-neutral-20: #203132;
    --wa-color-neutral-30: #2F444A;
    --wa-color-neutral-40: #415A62;
    --wa-color-neutral-50: #6A747A;
    --wa-color-neutral-60: #8B979C;
    --wa-color-neutral-70: #B1BCBF;
    --wa-color-neutral-80: #D3DBDD;
    --wa-color-neutral-90: #E8ECEC;
    --wa-color-neutral-95: #F8FAFB;
    --wa-color-neutral: var(--sg-color-slate-gray);
    --wa-color-neutral-on: var(--sg-color-off-white);

    --wa-color-success-05: #16220E;
    --wa-color-success-10: #203312;
    --wa-color-success-20: #344916;
    --wa-color-success-30: #537521;
    --wa-color-success-40: #73A22D;
    --wa-color-success-50: #94CE3A;
    --wa-color-success-60: #A9E93C;
    --wa-color-success-70: #C2F279;
    --wa-color-success-80: #D8F7A8;
    --wa-color-success-90: #ECFBD5;
    --wa-color-success-95: #F6FDEB;
    --wa-color-success: var(--sg-color-surface-green);
    --wa-color-success-on: var(--sg-color-deep-slate);

    --wa-color-warning-05: #2B1300;
    --wa-color-warning-10: #492000;
    --wa-color-warning-20: #713400;
    --wa-color-warning-30: #975000;
    --wa-color-warning-40: #BF7000;
    --wa-color-warning-50: #E8911C;
    --wa-color-warning-60: #FFB547;
    --wa-color-warning-70: #FFC979;
    --wa-color-warning-80: #FFDBAB;
    --wa-color-warning-90: #FFEDD6;
    --wa-color-warning-95: #FFF6EA;
    --wa-color-warning: #FFB547;
    --wa-color-warning-on: #492000;

    --wa-color-danger-05: #300103;
    --wa-color-danger-10: #500609;
    --wa-color-danger-20: #7A0F15;
    --wa-color-danger-30: #A41A24;
    --wa-color-danger-40: #D12736;
    --wa-color-danger-50: #FF5252;
    --wa-color-danger-60: #FF7B7B;
    --wa-color-danger-70: #FFAAAA;
    --wa-color-danger-80: #FFD0D0;
    --wa-color-danger-90: #FFE7E7;
    --wa-color-danger-95: #FFF2F2;
    --wa-color-danger: #D12736;
    --wa-color-danger-on: var(--sg-color-off-white);

    --wa-font-family-body: "Manrope", Arial, Helvetica, sans-serif;
    --wa-font-family-heading: "Manrope", Arial, Helvetica, sans-serif;
    --wa-font-family-code: "JetBrains Mono", monospace;
    --wa-font-weight-heading: 700;
    --wa-font-weight-body: 400;
    --wa-font-weight-code: 500;
    --wa-font-weight-action: 600;
    --wa-font-weight-semibold: 600;

    --wa-border-radius-s: 0.4rem;
    --wa-border-radius-m: 0.7rem;
    --wa-border-radius-l: 1rem;

    --wa-space-xs: 0.45rem;
    --wa-space-s: 0.7rem;
    --wa-space-m: 1rem;
    --wa-space-l: 1.35rem;
    --wa-space-xl: 1.9rem;

    --wa-border-width-s: 1px;
    --wa-border-width-m: 1.5px;
    --wa-panel-border-style: solid;
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: calc(var(--wa-border-radius-l) * 1.1);
  }
}