@layer eden {
  @layer subatomic, atom, molecule, organism;
}

@layer eden.subatomic {
  :root {
    /* Base Colors */
    --unity-gray2: #f7f8f8;
    --unity-gray3: #eff0f0;
    --unity-gray5: #e0e2e2;
    --unity-gray10: #d0d3d3;
    --unity-gray15: #bdc0c0;
    --unity-gray20: #a9adad;
    --unity-gray25: #9da1a1;
    --unity-gray30: #878a8c;
    --unity-gray35: #676b6e;
    --unity-gray40: #53575b;
    --unity-gray60: #3a3d40;
    --unity-gray90: #0d0f10;
    --unity-yellow5: #ffd61a;
    --unity-yellow10: #ffb81c;
    --unity-yellow15: #faa61a;
    --unity-yellow20: #f68d2e;
    --unity-yellow25: #e66a1f;
    --unity-yellow30: #d45311;
    --unity-yellow35: #974a07;
    --unity-yellow40: #674730;
    --unity-red5: #fda1b2;
    --unity-red10: light-dark(#fc4e6d, #ff7591);
    --unity-red15: light-dark(#e10f5a, #ed3a65);
    --unity-red20: #bd0057;
    --unity-red25: #a6004e;
    --unity-red30: #8f124a;
    --unity-red35: #7d003f;
    --unity-red40: #6e0d33;
    --unity-blue5: #b0eefc;
    --unity-blue10: #7de3f4;
    --unity-blue15: #49cce6;
    --unity-blue20: #01b6d1;
    --unity-blue25: #007da5;
    --unity-blue30: #006184;
    --unity-blue35: #005175;
    --unity-blue40: #003057;
    --unity-green5: #d3e952;
    --unity-green10: #bed21e;
    --unity-green15: #93c742;
    --unity-green20: #6db344;
    --unity-green25: #50a83e;
    --unity-green30: #318d43;
    --unity-green35: #206b3f;
    --unity-green40: #235c35;
    --unity-text120: #212225;
    --unity-black: #000000;
    --unity-white: #ffffff;
    --unity-white-transparency10: #ffffffde; /* Figma: Dark Mode/Transparency/87% */
    --unity-white-transparency20: #ffffff99; /* Figma: Dark Mode/Transparency/60% */
    --unity-white-transparency30: #ffffff61; /* Figma: Dark Mode/Transparency/38% */
    --unity-white-transparency40: #ffffff3d; /* Figma: Dark Mode/Transparency/24% */
    --unity-white-transparency50: #ffffff33; /* Figma: Dark Mode/Transparency/20% */
    --unity-white-transparency60: #ffffff29; /* Figma: Dark Mode/Transparency/16% */
    --unity-white-transparency70: #ffffff1f; /* Figma: Dark Mode/Transparency/12% */
    --unity-white-transparency80: #ffffff14; /* Figma: Dark Mode/Transparency/8% */

    /* Background Colors */
    --unity-background-color-alt: light-dark(
      var(--unity-gray3),
      var(--unity-white-transparency30)
    );
    --unity-background-color-hover: light-dark(
      var(--unity-gray3),
      var(--unity-white-transparency60)
    );
    --unity-background-color-active: light-dark(
      var(--unity-gray5),
      var(--unity-white-transparency40)
    );
    --unity-background-color-disabled: light-dark(
      var(--unity-gray2),
      var(--unity-white-transparency70)
    );
    /* unity-background-color-level-current will be overwritten in components that deal with depth so consumers will not need to worry */
    --unity-background-color-level-current: light-dark(
      var(--unity-white),
      #121212
    );
    --unity-background-color-level1: light-dark(var(--unity-white), #121212);
    --unity-background-color-level2: light-dark(var(--unity-white), #252525);
    --unity-background-color-level3: light-dark(var(--unity-white), #2c2c2c);
    --unity-background-color-level4: light-dark(var(--unity-white), #333333);
    --unity-background-color-level5: light-dark(var(--unity-white), #383838);

    /* Text Colors */
    --unity-text-color-primary: light-dark(
      var(--unity-text120),
      var(--unity-white-transparency10)
    );
    --unity-text-color-secondary: light-dark(
      var(--unity-gray40),
      var(--unity-white-transparency20)
    );
    --unity-text-color-tertiary: light-dark(
      var(--unity-gray30),
      var(--unity-white-transparency30)
    );
    --unity-text-color-inverted: light-dark(
      var(--unity-white),
      var(--unity-black)
    );

    /* Accent Colors */
    --unity-accent-color-link: light-dark(#157493, var(--unity-blue15));
    --unity-accent-color-link-active: light-dark(#b00504, #ff7770);
    --unity-accent-color-link-visited: light-dark(#9c4f9c, #c092fc);
    --unity-accent-color-primary: light-dark(
      var(--unity-blue30),
      var(--unity-blue15)
    );
    --unity-accent-color-info: light-dark(
      var(--unity-blue30),
      var(--unity-blue10)
    );
    --unity-accent-color-confirmation: light-dark(
      var(--unity-green30),
      var(--unity-green10)
    );
    --unity-accent-color-warning: light-dark(
      var(--unity-yellow30),
      var(--unity-yellow10)
    );
    --unity-accent-color-danger: light-dark(#b00504, #ff7770);

    /* Border Colors */
    --unity-border-color-primary: light-dark(
      var(--unity-gray30),
      var(--unity-white-transparency20)
    );
    --unity-border-color-secondary: light-dark(
      var(--unity-gray15),
      var(--unity-white-transparency30)
    );
    --unity-border-color-tertiary: light-dark(
      var(--unity-gray5),
      var(--unity-white-transparency70)
    );

    /* Highlight Colors */
    --unity-highlight-red: light-dark(#fe4f6633, #ba505e61);
    --unity-highlight-orange: light-dark(#fe98293d, #c68a4e61);
    --unity-highlight-yellow: light-dark(#fcdb3b61, #d6bf5961);
    --unity-highlight-green: light-dark(#a9d5273d, #8ca05261);
    --unity-highlight-blue: light-dark(#10d9e133, #60b5b861);
    --unity-highlight-darkblue: light-dark(#2596ff29, #5587b561);
    --unity-highlight-purple: light-dark(#9d53fe29, #7654a561);
    --unity-highlight-pink: light-dark(#f85bea33, #b56bb04d);
    --unity-highlight-brown: light-dark(#cd7d5a33, #946d5d61);
    --unity-highlight-gray: light-dark(#aeb8c13d, #8e969c61);

    /* Box Shadows */
    --unity-box-shadow-raised: 0 2px 4px 0 light-dark(#00000033, #00000066);
    --unity-box-shadow-detached: 0 4px 8px 0 light-dark(#00000033, #00000066);
    --unity-box-shadow-overlaid: 0 8px 16px 0 light-dark(#00000033, #00000066);
    --unity-box-shadow-popped: 0 16px 32px 0 light-dark(#00000033, #00000066);

    /* Font families */
    /* The Android fonts (Roboto, Noto Serif) need to come before other fallbacks (Arial, Georgia) because Android aliases those names to the Android fonts and the fallback metric adjustments won't correctly apply (See Fonts 2.1.0)*/
    --unity-font-family-sans: "Ensign:Sans", Roboto, Arial, sans-serif;
    --unity-font-family-serif: "Ensign:Serif", "Noto Serif", Georgia, serif;
    --unity-font-family-monospace: Courier, "Courier New", monospace;

    /* Fonts */
    --unity-text1-body: normal normal 300 calc(18rem / 16) / 1.6
      var(--unity-font-family-sans);
    --unity-text1-body-emphasized: normal normal 400 calc(18rem / 16) / 1.6
      var(--unity-font-family-sans);
    --unity-text2-body-formal: normal normal 400 calc(18rem / 16) / 1.6
      var(--unity-font-family-serif);
    --unity-text3-body: normal normal 400 calc(16rem / 16) / 1.4
      var(--unity-font-family-sans);
    --unity-text3-body-emphasized: normal normal 600 calc(16rem / 16) / 1.4
      var(--unity-font-family-sans);
    --unity-text3-body-long: normal normal 400 calc(16rem / 16) / 1.6
      var(--unity-font-family-sans);
    --unity-text3-body-long-emphasized: normal normal 600 calc(16rem / 16) / 1.6
      var(--unity-font-family-sans);
    --unity-text4-description: normal normal 400 calc(14rem / 16) / 1.4
      var(--unity-font-family-sans);
    --unity-text4-description-emphasized: normal normal 600 calc(14rem / 16) /
      1.4 var(--unity-font-family-sans);
    --unity-text5-citation: normal normal 400 calc(13rem / 16) / 1.4
      var(--unity-font-family-sans);
    --unity-text6-legal: normal normal 400 calc(11rem / 16) / 1.4
      var(--unity-font-family-sans);

    /* Spacings */
    --unity-spacing4: calc(4rem / 16);
    --unity-spacing8: calc(8rem / 16);
    --unity-spacing16: calc(16rem / 16);
    --unity-spacing24: calc(24rem / 16);
    --unity-spacing32: calc(32rem / 16);
    --unity-spacing48: calc(48rem / 16);
    --unity-spacing64: calc(64rem / 16);
    --unity-spacing96: calc(96rem / 16);
    --unity-spacing128: calc(128rem / 16);

    /* Border radius */
    --unity-border-radius: calc(2rem / 16);
  }

  * {
    box-sizing: border-box;

    ::-moz-focus-inner {
      border: none;
    }

    :-moz-focusring {
      outline-offset: 2px;
    }

    :focus {
      outline-offset: 2px;
    }

    :focus:not(:focus-visible) {
      outline: 0;
    }
  }

  *:before,
  *:after {
    box-sizing: border-box;
  }

  html {
    /* The color-scheme should be overwritten at the app level to support dark mode */
    color-scheme: light;
    font: normal normal 400 100% / 1.6 var(--unity-font-family-sans);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body {
    background: var(--unity-background-color-level-current);
    color: var(--unity-text-color-primary);
    margin: 0;
  }

  a {
    background-color: transparent;
    color: var(--unity-accent-color-link);

    &:visited {
      color: var(--unity-accent-color-link-visited);
    }

    &:hover {
      text-decoration: none;
    }

    &:active {
      color: var(--unity-accent-color-link-active);
      text-decoration: underline;
    }
  }

  abbr[title] {
    border-block-end: 1px dotted;
  }

  mark {
    background: var(--unity-highlight-yellow);
  }

  code,
  kbd,
  pre,
  samp {
    font-family: var(--unity-font-family-monospace);
  }

  pre {
    overflow: auto;
  }

  code {
    white-space: pre-wrap;
    background-color: var(--unity-background-color-alt);
  }
}