:root, ::backdrop {

  --hylo-unit: 4px;
  /*************************************************************************/
  /********************* Colors Palette ************************************/
  /**
   * @token   --hylo-color-one
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-darkmode
   */
  --hylo-color-one: #A634ED;
  --hylo-color-one-darkmode: #A634ED;
  /**
   * @token   --hylo-color-one-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-lightest-darkmode
   */
  --hylo-color-one-lightest: #E7D6FE;
  --hylo-color-one-lightest-darkmode: #E7D6FE;
  /**
   * @token   --hylo-color-one-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-lighter-darkmode
   */
  --hylo-color-one-lighter: #E4B5FD;
  --hylo-color-one-lighter-darkmode: #E4B5FD;
  /**
   * @token   --hylo-color-one-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-light-darkmode
   */
  --hylo-color-one-light: #C881ED;
  --hylo-color-one-light-darkmode: #C881ED;
  /**
   * @token   --hylo-color-one-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-dark-darkmode
   */
  --hylo-color-one-dark: #972BC7;
  --hylo-color-one-dark-darkmode: #972BC7;
  /**
   * @token   --hylo-color-one-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-darker-darkmode
   */
  --hylo-color-one-darker: #821EA0;
  --hylo-color-one-darker-darkmode: #821EA0;
  /**
   * @token   --hylo-color-one-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-one-darkest-darkmode
   * @separator
   */
  --hylo-color-one-darkest: #481052;
  --hylo-color-one-darkest-darkmode: #481052;
  /**
   * @token   --hylo-color-two
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-darkmode
   */
  --hylo-color-two: #3B82F6;
  --hylo-color-two-darkmode: #3B82F6;
  /**
   * @token   --hylo-color-two-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-lightest-darkmode
   */
  --hylo-color-two-lightest: #ffffff;
  --hylo-color-two-lightest-darkmode: #ffffff;
  /**
   * @token   --hylo-color-two-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-lighter-darkmode
   */
  --hylo-color-two-lighter: #DBEAFE;
  --hylo-color-two-lighter-darkmode: #DBEAFE;
  /**
   * @token   --hylo-color-two-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-light-darkmode
   */
  --hylo-color-two-light: #93C5FD;
  --hylo-color-two-light-darkmode: #93C5FD;
  /**
   * @token   --hylo-color-two-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-dark-darkmode
   */
  --hylo-color-two-dark: #3B82F6;
  --hylo-color-two-dark-darkmode: #3B82F6;
  /**
   * @token   --hylo-color-two-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-darker-darkmode
   */
  --hylo-color-two-darker: #1D4ED8;
  --hylo-color-two-darker-darkmode: #1D4ED8;
  /**
   * @token   --hylo-color-two-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-two-darkest-darkmode
   * @separator
   */
  --hylo-color-two-darkest: #1E40AF;
  --hylo-color-two-darkest-darkmode: #1E40AF;
  /**
   * @token   --hylo-color-three
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-darkmode
   */
  --hylo-color-three: #9CA3AF;
  --hylo-color-three-darkmode: #9CA3AF;
  /**
   * @token   --hylo-color-three-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-lightest-darkmode
   */
  --hylo-color-three-lightest: #F3F4F6;
  --hylo-color-three-lightest-darkmode: #F3F4F6;
  /**
   * @token   --hylo-color-three-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-lighter-darkmode
   */
  --hylo-color-three-lighter: #E5E7EB;
  --hylo-color-three-lighter-darkmode: #E5E7EB;
  /**
   * @token   --hylo-color-three-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-light-darkmode
   */
  --hylo-color-three-light: #D1D5DB;
  --hylo-color-three-light-darkmode: #D1D5DB;
  /**
   * @token   --hylo-color-three-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-dark-darkmode
   */
  --hylo-color-three-dark: #374151;
  --hylo-color-three-dark-darkmode: #374151;
  /**
   * @token   --hylo-color-three-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-darker-darkmode
   */
  --hylo-color-three-darker: #1F2937;
  --hylo-color-three-darker-darkmode: #1F2937;
  /**
   * @token   --hylo-color-three-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-three-darkest-darkmode
   * @separator
   */
  --hylo-color-three-darkest: #111827;
  --hylo-color-three-darkest-darkmode: #111827;
  /**
   * @token   --hylo-color-four
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-darkmode
   */
  --hylo-color-four: #829BBC;
  --hylo-color-four-darkmode: #829BBC;
  /**
   * @token   --hylo-color-four-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-lightest-darkmode
   */
  --hylo-color-four-lightest: #EDF3F8;
  --hylo-color-four-lightest-darkmode: #EDF3F8;
  /**
   * @token   --hylo-color-four-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-lighter-darkmode
   */
  --hylo-color-four-lighter: #E4EBF5;
  --hylo-color-four-lighter-darkmode: #E4EBF5;
  /**
   * @token   --hylo-color-four-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-light-darkmode
   */
  --hylo-color-four-light: #C3D2E5;
  --hylo-color-four-light-darkmode: #C3D2E5;
  /**
   * @token   --hylo-color-four-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-dark-darkmode
   */
  --hylo-color-four-dark: #4F6A91;
  --hylo-color-four-dark-darkmode: #4F6A91;
  /**
   * @token   --hylo-color-four-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-darker-darkmode
   */
  --hylo-color-four-darker: #3B4D67;
  --hylo-color-four-darker-darkmode: #3B4D67;
  /**
   * @token   --hylo-color-four-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-four-darkest-darkmode
   * @separator
   */
  --hylo-color-four-darkest: #1E293B;
  --hylo-color-four-darkest-darkmode: #1E293B;
  /**
   * @token   --hylo-color-gray
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-darkmode
   */
  --hylo-color-gray: #9CA3AF;
  --hylo-color-gray-darkmode: #9CA3AF;
  /**
   * @token   --hylo-color-gray-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-lightest-darkmode
   */
  --hylo-color-gray-lightest: #FFFFFF;
  --hylo-color-gray-lightest-darkmode: #000000;
  /**
   * @token   --hylo-color-gray-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-lighter-darkmode
   */
  --hylo-color-gray-lighter: #E5E7EB;
  --hylo-color-gray-lighter-darkmode: #E5E7EB;
  /**
   * @token   --hylo-color-gray-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-light-darkmode
   */
  --hylo-color-gray-light: #D1D5DB;
  --hylo-color-gray-light-darkmode: #D1D5DB;
  /**
   * @token   --hylo-color-gray-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-dark-darkmode
   */
  --hylo-color-gray-dark: #374151;
  --hylo-color-gray-dark-darkmode: #374151;
  /**
   * @token   --hylo-color-gray-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-darker-darkmode
   */
  --hylo-color-gray-darker: #1F2937;
  --hylo-color-gray-darker-darkmode: #1F2937;
  /**
   * @token   --hylo-color-gray-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-gray-darkest-darkmode
   * @separator
   */
  --hylo-color-gray-darkest: #000000;
  --hylo-color-gray-darkest-darkmode: #FFFFFF;
  /**
   * @token   --hylo-color-error
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-darkmode
   */
  --hylo-color-error: #DC2626;
  --hylo-color-error-darkmode: #DC2626;
  /**
   * @token   --hylo-color-error-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-lightest-darkmode
   */
  --hylo-color-error-lightest: #FEF2F2;
  --hylo-color-error-lightest-darkmode: #FEF2F2;
  /**
   * @token   --hylo-color-error-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-lighter-darkmode
   */
  --hylo-color-error-lighter: #FCA5A5;
  --hylo-color-error-lighter-darkmode: #FCA5A5;
  /**
   * @token   --hylo-color-error-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-light-darkmode
   */
  --hylo-color-error-light: #EF4444;
  --hylo-color-error-light-darkmode: #EF4444;
  /**
   * @token   --hylo-color-error-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-dark-darkmode
   */
  --hylo-color-error-dark: #B91C1C;
  --hylo-color-error-dark-darkmode: #B91C1C;
  /**
   * @token   --hylo-color-error-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-darker-darkmode
   */
  --hylo-color-error-darker: #991B1B;
  --hylo-color-error-darker-darkmode: #991B1B;
  /**
   * @token   --hylo-color-error-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-error-darkest-darkmode
   * @separator
   */
  --hylo-color-error-darkest: #7F1D1D;
  --hylo-color-error-darkest-darkmode: #7F1D1D;
  /**
   * @token   --hylo-color-warning
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-darkmode
   */
  --hylo-color-warning: #FBBF24;
  --hylo-color-warning-darkmode: #FBBF24;
  /**
   * @token   --hylo-color-warning-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-lightest-darkmode
   */
  --hylo-color-warning-lightest: #FEFCE8;
  --hylo-color-warning-lightest-darkmode: #FEFCE8;
  /**
   * @token   --hylo-color-warning-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-lighter-darkmode
   */
  --hylo-color-warning-lighter: #FDE68A;
  --hylo-color-warning-lighter-darkmode: #FDE68A;
  /**
   * @token   --hylo-color-warning-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-light-darkmode
   */
  --hylo-color-warning-light: #FCD34D;
  --hylo-color-warning-light-darkmode: #FCD34D;
  /**
   * @token   --hylo-color-warning-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-dark-darkmode
   */
  --hylo-color-warning-dark: #F59E0B;
  --hylo-color-warning-dark-darkmode: #F59E0B;
  /**
   * @token   --hylo-color-warning-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-darker-darkmode
   */
  --hylo-color-warning-darker: #D97706;
  --hylo-color-warning-darker-darkmode: #D97706;
  /**
   * @token   --hylo-color-warning-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-warning-darkest-darkmode
   * @separator
   */
  --hylo-color-warning-darkest: #92400E;
  --hylo-color-warning-darkest-darkmode: #92400E;
  /**
   * @token   --hylo-color-success
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-darkmode
   */
  --hylo-color-success: #22C55E;
  --hylo-color-success-darkmode: #22C55E;
  /**
   * @token   --hylo-color-success-lightest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-lightest-darkmode
   */
  --hylo-color-success-lightest: #DCFCE7;
  --hylo-color-success-lightest-darkmode: #DCFCE7;
  /**
   * @token   --hylo-color-success-lighter
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-lighter-darkmode
   */
  --hylo-color-success-lighter: #86EFAC;
  --hylo-color-success-lighter-darkmode: #86EFAC;
  /**
   * @token   --hylo-color-success-light
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-light-darkmode
   */
  --hylo-color-success-light: #4ADE80;
  --hylo-color-success-light-darkmode: #4ADE80;
  /**
   * @token   --hylo-color-success-dark
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-dark-darkmode
   */
  --hylo-color-success-dark: #16A34A;
  --hylo-color-success-dark-darkmode: #16A34A;
  /**
   * @token   --hylo-color-success-darker
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-darker-darkmode
   */
  --hylo-color-success-darker: #15803D;
  --hylo-color-success-darker-darkmode: #15803D;
  /**
   * @token   --hylo-color-success-darkest
   * @type    color
   * @group   Colors Palette
   * @extend  --hylo-color-success-darkest-darkmode
   * @separator
   */
  --hylo-color-success-darkest: #14532D;
  --hylo-color-success-darkest-darkmode: #14532D;
}
:root.hylo-color-scheme-dark {
  --hylo-color-one: var(--hylo-color-one-darkmode) !important;
  --hylo-color-one-lightest: var(--hylo-color-one-lightest-darkmode) !important;
  --hylo-color-one-lighter: var(--hylo-color-one-lighter-darkmode) !important;
  --hylo-color-one-light: var(--hylo-color-one-light-darkmode) !important;
  --hylo-color-one-dark: var(--hylo-color-one-dark-darkmode) !important;
  --hylo-color-one-darker: var(--hylo-color-one-darker-darkmode) !important;
  --hylo-color-one-darkest: var(--hylo-color-one-darkest-darkmode) !important;
  --hylo-color-two: var(--hylo-color-two-darkmode) !important;
  --hylo-color-two-lightest: var(--hylo-color-two-lightest-darkmode) !important;
  --hylo-color-two-lighter: var(--hylo-color-two-lighter-darkmode) !important;
  --hylo-color-two-light: var(--hylo-color-two-light-darkmode) !important;
  --hylo-color-two-dark: var(--hylo-color-two-dark-darkmode) !important;
  --hylo-color-two-darker: var(--hylo-color-two-darker-darkmode) !important;
  --hylo-color-two-darkest: var(--hylo-color-two-darkest-darkmode) !important;
  --hylo-color-three: var(--hylo-color-three-darkmode) !important;
  --hylo-color-three-lightest: var(--hylo-color-three-lightest-darkmode) !important;
  --hylo-color-three-lighter: var(--hylo-color-three-lighter-darkmode) !important;
  --hylo-color-three-light: var(--hylo-color-three-light-darkmode) !important;
  --hylo-color-three-dark: var(--hylo-color-three-dark-darkmode) !important;
  --hylo-color-three-darker: var(--hylo-color-three-darker-darkmode) !important;
  --hylo-color-three-darkest: var(--hylo-color-three-darkest-darkmode) !important;
  --hylo-color-four: var(--hylo-color-four-darkmode) !important;
  --hylo-color-four-lightest: var(--hylo-color-four-lightest-darkmode) !important;
  --hylo-color-four-lighter: var(--hylo-color-four-lighter-darkmode) !important;
  --hylo-color-four-light: var(--hylo-color-four-light-darkmode) !important;
  --hylo-color-four-dark: var(--hylo-color-four-dark-darkmode) !important;
  --hylo-color-four-darker: var(--hylo-color-four-darker-darkmode) !important;
  --hylo-color-four-darkest: var(--hylo-color-four-darkest-darkmode) !important;
  --hylo-color-gray: var(--hylo-color-gray-darkmode) !important;
  --hylo-color-gray-lightest: var(--hylo-color-gray-lightest-darkmode) !important;
  --hylo-color-gray-lighter: var(--hylo-color-gray-lighter-darkmode) !important;
  --hylo-color-gray-light: var(--hylo-color-gray-light-darkmode) !important;
  --hylo-color-gray-dark: var(--hylo-color-gray-dark-darkmode) !important;
  --hylo-color-gray-darker: var(--hylo-color-gray-darker-darkmode) !important;
  --hylo-color-gray-darkest: var(--hylo-color-gray-darkest-darkmode) !important;
  --hylo-color-error: var(--hylo-color-error-darkmode) !important;
  --hylo-color-error-lightest: var(--hylo-color-error-lightest-darkmode) !important;
  --hylo-color-error-lighter: var(--hylo-color-error-lighter-darkmode) !important;
  --hylo-color-error-light: var(--hylo-color-error-light-darkmode) !important;
  --hylo-color-error-dark: var(--hylo-color-error-dark-darkmode) !important;
  --hylo-color-error-darker: var(--hylo-color-error-darker-darkmode) !important;
  --hylo-color-error-darkest: var(--hylo-color-error-darkest-darkmode) !important;
  --hylo-color-warning: var(--hylo-color-warning-darkmode) !important;
  --hylo-color-warning-lightest: var(--hylo-color-warning-lightest-darkmode) !important;
  --hylo-color-warning-lighter: var(--hylo-color-warning-lighter-darkmode) !important;
  --hylo-color-warning-light: var(--hylo-color-warning-light-darkmode) !important;
  --hylo-color-warning-dark: var(--hylo-color-warning-dark-darkmode) !important;
  --hylo-color-warning-darker: var(--hylo-color-warning-darker-darkmode) !important;
  --hylo-color-warning-darkest: var(--hylo-color-warning-darkest-darkmode) !important;
  --hylo-color-success: var(--hylo-color-success-darkmode) !important;
  --hylo-color-success-lightest: var(--hylo-color-success-lightest-darkmode) !important;
  --hylo-color-success-lighter: var(--hylo-color-success-lighter-darkmode) !important;
  --hylo-color-success-light: var(--hylo-color-success-light-darkmode) !important;
  --hylo-color-success-dark: var(--hylo-color-success-dark-darkmode) !important;
  --hylo-color-success-darker: var(--hylo-color-success-darker-darkmode) !important;
  --hylo-color-success-darkest: var(--hylo-color-success-darkest-darkmode) !important;
}

:root, ::backdrop {
  /*************************************************************************/
  /********************* Colors ********************************************/
  /**
   * @token   --hylo-color-font-body
   * @type    color
   * @group   Colors
   * @extend  --hylo-color-font-body-darkmode
   *
   * The default font color.
   */
  --hylo-color-font-body: var(--hylo-color-three-lightest);
  --hylo-color-font-body-darkmode: var(--hylo-color-three-lightest);
  /**
   * @token   --hylo-color-bg-body
   * @type    color
   * @group   Colors
   * @extend  --hylo-color-bg-body-darkmode
   *
   * The default background color.
   */
  --hylo-color-bg-body: var(--hylo-color-gray-darkest);
  --hylo-color-bg-body-darkmode: var(--hylo-color-gray-darkest);
  /**
   * @token   --hylo-color-border-default
   * @type    color
   * @group   Colors
   * @extend  --hylo-color-border-default-darkmode
   *
   * The default border color.
   */
  --hylo-color-border-default: var(--hylo-color-one);
  --hylo-color-border-default-darkmode: var(--hylo-color-one);
  color: var(--hylo-color-font-body);
  background: var(--hylo-color-bg-body);
}
:root.hylo-color-scheme-dark {
  --hylo-color-font-body: var(--hylo-color-font-body-darkmode) !important;
  --hylo-color-bg-body: var(--hylo-color-bg-body-darkmode) !important;
  --hylo-color-border-default: var(--hylo-color-border-default-darkmode) !important;
}