:root {
  --black: #000000;
  --black-a80: #000000cc;
  --black-a64: #000000a3;
  --black-a56: #0000008f;
  --black-a48: #0000007a;
  --black-a16: #00000029;
  --black-a8: #00000014;
  --black-a4: #0000000a;
  --black-a0: #00000000;
  --white: #ffffff;
  --white-0: #ffffff00;
  --white-4: #ffffff0a;
  --white-8: #ffffff14;
  --white-16: #ffffff29;
  --white-24: #ffffff3d;
  --acid-green: #73ff61;
  --light-blue: #00d9ff;
  --red: #e0201b;
  --pink-flamingo: #f563ff;
  --accent: var(--acid-green);
  --support-1: var(--light-blue);
  --surface-accent: var(--accent);
  --surface-base: var(--white);
  --surface-scrim: var(--black-a48);
  --surface-alert: var(--pink-flamingo);
  --text-on-alert: var(--black);
  --surface-support-1: var(--support-1);
  --surface-subtle: var(--black-a4);
  --surface-hover: var(--black-a4);
  --text-strong: var(--black);
  --text-strong-invert: var(--white);
  --text-moderate: var(--black-a56);
  --text-alert: #ff5d16;
  --text-accent: var(--accent);
  --icon-strong: var(--black);
  --icon-strong-invert: var(--white);
  --action-primary-background-default: var(--black);
  --action-primary-background-hover: var(--black-a80);
  --action-primary-background-pressed: var(--black-a64);
  --action-primary-background-disabled: var(--black-a8);
  --action-primary-background-active: var(--white);
  --action-primary-border-default: var(--black-a0);
  --action-primary-border-hover: var(--black-a0);
  --action-primary-border-pressed: var(--black-a0);
  --action-primary-border-disabled: var(--black-a0);
  --action-primary-border-active: var(--black);
  --action-secondary-background-default: var(--black-a0);
  --action-secondary-background-hover: var(--black-a0);
  --action-secondary-background-pressed: var(--black-a0);
  --action-secondary-background-disabled: var(--black-a8);
  --action-secondary-background-active: var(--white);
  --action-secondary-border-default: var(--black);
  --action-secondary-border-hover: var(--black);
  --action-secondary-border-pressed: var(--black);
  --action-secondary-border-disabled: var(--black-a0);
  --action-secondary-border-active: var(--black);
  --action-floating-foreground-default: var(--black);
  --action-floating-foreground-hover: var(--black);
  --action-floating-foreground-pressed: var(--black);
  --action-floating-foreground-disabled: var(--black-a16);
  --action-floating-background-default: var(--black-a0);
  --action-floating-background-hover: var(--black-a4);
  --action-floating-background-pressed: var(--black-a8);
  --action-floating-background-disabled: var(--black-a0);
  --border-divider-strong: var(--black);
  --border-alert: #ff5d16;
  --tab-background-default: var(--white-0);
  --tab-background-hover: var(--white-0);
  --tab-background-pressed: var(--white-0);
  --tab-background-active: var(--white);
  --tab-border-default: var(--black);
  --tab-border-hover: var(--black);
  --tab-border-pressed: var(--black);
  --tab-border-active: var(--black);
  --page-margin-desktop: 8px;
  --page-margin-mobile: 8px;
  --small: 8px;
  --gutter-small: 8px;
  --medium-small: 16px;
  --font-sans: "Inter", system-ui, sans-serif;
}
[data-theme="frontend"] {
  --surface-accent: var(--accent);
  --surface-alert: var(--pink-flamingo);
  --text-on-alert: var(--black);
  --action-primary-background-active: var(--white);
  --action-primary-border-active: var(--black);
  --action-secondary-background-active: var(--white);
  --action-secondary-border-active: var(--black);
}
[data-theme="backend"] {
  --surface-accent: var(--black-a4);
  --surface-alert: var(--red);
  --text-on-alert: var(--white);
  --action-primary-background-active: var(--black-a8);
  --action-primary-border-active: var(--black-a0);
  --action-secondary-background-active: var(--black-a8);
  --action-secondary-border-active: var(--black-a0);
}
.label-micro {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-extra-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-medium {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-large {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-extra-large {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.body-micro {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
}
.body-extra-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}
.body-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}
.body-medium {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.body-large {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
}
.body-extra-large {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}
@media (max-width: 959px) {
  .label-micro--mobile {
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .label-extra-small--mobile {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .label-small--mobile {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .label-medium--mobile {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .label-large--mobile {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .label-extra-large--mobile {
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .body-micro--mobile {
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
  }
  .body-extra-small--mobile {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
  }
  .body-small--mobile {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
  }
  .body-medium--mobile {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
  }
  .body-large--mobile {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
  }
  .body-extra-large--mobile {
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
  }
}