@layer base {
  :root {
    --1px: 0.0625rem;
    --2px: 0.125rem;
    --3px: 0.1875rem;
    --4px: 0.25rem;
    --5px: 0.3125rem;
    --6px: 0.375rem;
    --7px: 0.4375rem;
    --8px: 0.5rem;
    --9px: 0.5625rem;
    --10px: 0.625rem;
    --11px: 0.6875rem;
    --12px: 0.75rem;
    --13px: 0.8125rem;
    --14px: 0.875rem;
    --15px: 0.9375rem;
    --16px: 1rem;
    --17px: 1.0625rem;
    --18px: 1.125rem;
    --19px: 1.1875rem;
    --20px: 1.25rem;
    --21px: 1.3125rem;
    --22px: 1.375rem;
    --23px: 1.4375rem;
    --24px: 1.5rem;
    --26px: 1.625rem;
    --27px: 1.6875rem;
    --28px: 1.75rem;
    --29px: 1.8125rem;
    --30px: 1.875rem;
    --31px: 1.9375rem;
    --32px: 2rem;
    --33px: 2.0625rem;
    --34px: 2.125rem;
    --35px: 2.1875rem;
    --36px: 2.25rem;
    --37px: 2.3125rem;
    --38px: 2.375rem;
    --39px: 2.4375rem;
    --40px: 2.5rem;
    --41px: 2.5625rem;
    --42px: 2.625rem;
    --43px: 2.6875rem;
    --44px: 2.75rem;
    --45px: 2.8125rem;
    --46px: 2.875rem;
    --47px: 2.9375rem;
    --48px: 3rem;
    --49px: 3.0625rem;
    --50px: 3.125rem;
    --51px: 3.1875rem;
    --52px: 3.25rem;
    --53px: 3.3125rem;
    --54px: 3.375rem;
    --55px: 3.4375rem;
    --56px: 3.5rem;
    --57px: 3.5625rem;
    --58px: 3.625rem;
    --59px: 3.6875rem;
    --60px: 3.75rem;
    --61px: 3.8125rem;
    --62px: 3.875rem;
    --63px: 3.9375rem;
    --64px: 4rem;

    --80px: 5rem;
    --96px: 6rem;
    --112px: 7rem;
    --128px: 8rem;
    --144px: 9rem;
    --160px: 10rem;
    --176px: 11rem;
    --192px: 12rem;
    --208px: 13rem;
    --224px: 14rem;
    --240px: 15rem;
    --256px: 16rem;
    --272px: 17rem;
    --288px: 18rem;
    --304px: 19rem;
    --320px: 20rem;
    --336px: 21rem;
    --352px: 22rem;
    --368px: 23rem;
    --384px: 24rem;
    --400px: 25rem;
    --416px: 26rem;
    --432px: 27rem;
    --448px: 28rem;
    --464px: 29rem;
    --480px: 30rem;
    --496px: 31rem;
    --512px: 32rem;
    --528px: 33rem;
    --544px: 34rem;
    --560px: 35rem;
    --576px: 36rem;
    --592px: 37rem;
    --608px: 38rem;
    --624px: 39rem;
    --640px: 40rem;
  }

  html {
    --bg-neutral: var(--color-neutral-900);
    --bg-neutral-muted: var(--color-neutral-700);
    --fg-neutral: var(--color-white);

    --bg-base: var(--color-neutral-50);
    --bg-base-100: var(--color-neutral-100);
    --bg-base-200: var(--color-neutral-200);
    --bg-base-300: var(--color-neutral-300);
    --bg-base-400: var(--color-neutral-400);

    --fg-base: var(--color-neutral-950);
    --fg-input: var(--color-neutral-800);
    --fg-muted: var(--color-neutral-600);

    --bg-primary: var(--color-blue-500);
    --fg-primary: var(--color-white);
    --bg-accent: var(--color-blue-500);
    --fg-accent: var(--color-white);
    --bg-info: var(--color-sky-500);
    --fg-info: var(--color-white);
    --bg-success: var(--color-green-600);
    --fg-success: var(--color-white);
    --bg-warning: var(--color-yellow-600);
    --fg-warning: var(--color-white);
    --bg-critical: var(--color-red-500);
    --fg-critical: var(--color-white);
    --bg-option: var(--color-purple-500);
    --fg-option: var(--color-white);

    --border-default: var(--color-neutral-400);
    --border-muted: var(--color-neutral-300);
    --border-disabled: var(--color-neutral-200);

    --outline: color-mix(in srgb, var(--bg-accent) 25%, transparent);
    --shadow-default: 1px 1px 2px 2px oklch(0 0 0 / 0.10);
    --shadow-inset: inset 0 1px 0 oklch(0.88 0.01 247.97 / 0.20);
  }

  html.dark {
    --bg-neutral: var(--color-neutral-900);
    --bg-neutral-muted: var(--color-neutral-700);
    --fg-neutral: var(--color-white);

    --bg-base: var(--color-neutral-950);
    --bg-base-100: var(--color-neutral-900);
    --bg-base-200: var(--color-neutral-800);
    --bg-base-300: var(--color-neutral-700);
    --bg-base-400: var(--color-neutral-600);

    --fg-base: var(--color-neutral-50);
    --fg-input: var(--color-neutral-100);
    --fg-muted: var(--color-neutral-400);

    --border-default: var(--color-neutral-200);
    --border-muted: var(--color-neutral-300);
    --border-disabled: var(--color-neutral-400);
  }

  .scrollbar-thin {
    scrollbar-width: thin; /* Firefox */
  }
  .scrollbar-thin::-webkit-scrollbar {
    /* Safari and Chrome */
    width: 2px;
    background-color: ButtonFace;
  }
  .scrollbar-default {
    -ms-overflow-style: auto; /* IE and Edge */
    scrollbar-width: auto; /* Firefox */
  }
  .scrollbar-default::-webkit-scrollbar {
    /* Safari and Chrome */
    width: auto;
  }

  kbd {
    font-family: var(--font-family-mono);
    display: inline-block;
    padding: 0.2rem 0.25rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: #ffffff;
    box-shadow: 0 0 2px 0 #000;
  }
}