:root {
    /* "--theme-*" are deprecated in v26, and are now legacy variables */
    /* starting in v26, only use "--atm-*" css variables */

    /* primary */
    /* -------------------------------------------------- */

    --theme-primary-color:        #d73f1d;
    --theme-primary-color-rgb:    215, 63, 29;
    --theme-primary-color-fg:     #ffffff;
    --theme-primary-color-fg-rgb: 255, 255, 255;

    --theme-primary-color-hsl-hue:        11;
    --theme-primary-color-hsl-saturation: 76;
    --theme-primary-color-hsl-lightness:  48;

    /* TODO: Update or remove these with button changes */
    --theme-primary-color-bg-hover:     #eb4b27;
    --theme-primary-color-bg-active:    #b83b1f;
    --theme-primary-color-focus-border: #9e331a;

    --atm-color-primary:        #196cfa;
    --atm-color-primary-rgb:    25, 108, 250;
    --atm-color-primary-fg:     #ffffff;
    --atm-color-primary-fg-rgb: 255, 255, 255;

    --atm-color-primary-hsl-hue:        218;
    --atm-color-primary-hsl-saturation: 96;
    --atm-color-primary-hsl-lightness:  54;

    --atm-color-primary-bg-hover:     #1661e1;
    --atm-color-primary-bg-active:    #1a6eff;
    --atm-color-primary-focus-border: #1456c7;

    /* secondary */
    /* -------------------------------------------------- */

    --theme-secondary-color:        #403830;
    --theme-secondary-color-rgb:    64, 56, 48;
    --theme-secondary-color-fg:     #ffffff;
    --theme-secondary-color-fg-rgb: 255, 255, 255;

    --theme-secondary-color-hsl-hue:        30;
    --theme-secondary-color-hsl-saturation: 14;
    --theme-secondary-color-hsl-lightness:  22;

    /* TODO: Update or remove these with button changes */
    --theme-secondary-color-bg-hover:     #717578;
    --theme-secondary-color-bg-active:    #414345;
    --theme-secondary-color-focus-border: #292a2b;

    --atm-color-secondary:        #02072c;
    --atm-color-secondary-rgb:    2, 7, 44;
    --atm-color-secondary-fg:     #ffffff;
    --atm-color-secondary-fg-rgb: 255, 255, 255;

    --atm-color-secondary-hsl-hue:        233;
    --atm-color-secondary-hsl-saturation: 91;
    --atm-color-secondary-hsl-lightness:  9;

    /* accent */
    /* -------------------------------------------------- */

    --theme-accent-color:        #1979cc;
    --theme-accent-color-rgb:    25, 121, 204;
    --theme-accent-color-fg:     #ffffff;
    --theme-accent-color-fg-rgb: 255, 255, 255;

    --theme-accent-color-hsl-hue:        208;
    --theme-accent-color-hsl-saturation: 78;
    --theme-accent-color-hsl-lightness:  45;

    /* TODO: Update or remove these with button changes */
    --theme-accent-color-bg-hover:     #0885f4;
    --theme-accent-color-bg-active:    #0669c1;
    --theme-accent-color-focus-border: #055ba7;

    --atm-color-accent:        #9e49d0;
    --atm-color-accent-rgb:    158, 73, 208;
    --atm-color-accent-fg:     #ffffff;
    --atm-color-accent-fg-rgb: 255, 255, 255;

    --atm-color-accent-hsl-hue:        278;
    --atm-color-accent-hsl-saturation: 59;
    --atm-color-accent-hsl-lightness:  55;

    /* success */
    /* -------------------------------------------------- */

    --theme-success-color:        #1d8636;
    --theme-success-color-rgb:    29, 134, 54;
    --theme-success-color-fg:     #ffffff;
    --theme-success-color-fg-rgb: 255, 255, 255;

    --theme-success-color-hsl-hue:        134;
    --theme-success-color-hsl-saturation: 64;
    --theme-success-color-hsl-lightness:  32;

    /* TODO: Update or remove these with button changes */
    --theme-success-color-bg-hover:     #249f40;
    --theme-success-color-bg-active:    #186c2c;
    --theme-success-color-focus-border: #125221;

    --atm-color-success:        #1d8636;
    --atm-color-success-rgb:    29, 134, 54;
    --atm-color-success-fg:     #ffffff;
    --atm-color-success-fg-rgb: 255, 255, 255;

    --atm-color-success-hsl-hue:        134;
    --atm-color-success-hsl-saturation: 64;
    --atm-color-success-hsl-lightness:  32;

    /* info */
    /* -------------------------------------------------- */

    --theme-info-color:        var(--theme-accent-color);
    --theme-info-color-rgb:    var(--theme-accent-color-rgb);
    --theme-info-color-fg:     var(--theme-accent-color-fg);
    --theme-info-color-fg-rgb: var(--theme-accent-color-fg-rgb);

    --theme-info-color-hsl-hue:        var(--theme-accent-color-hsl-hue);
    --theme-info-color-hsl-saturation: var(--theme-accent-color-hsl-saturation);
    --theme-info-color-hsl-lightness:  var(--theme-accent-color-hsl-lightness);

    --atm-color-info:        var(--atm-color-accent);
    --atm-color-info-rgb:    var(--atm-color-accent-rgb);
    --atm-color-info-fg:     var(--atm-color-accent-fg);
    --atm-color-info-fg-rgb: var(--atm-color-accent-fg-rgb);

    --atm-color-info-hsl-hue:        var(--atm-color-accent-hsl-hue);
    --atm-color-info-hsl-saturation: var(--atm-color-accent-hsl-saturation);
    --atm-color-info-hsl-lightness:  var(--atm-color-accent-hsl-lightness);

    /* warning */
    /* -------------------------------------------------- */

    --theme-warning-color:        #fb8903;
    --theme-warning-color-rgb:    251, 137, 3;
    --theme-warning-color-fg:     #3c3c3c;
    --theme-warning-color-fg-rgb: 60, 60, 60;

    --theme-warning-color-hsl-hue:        32;
    --theme-warning-color-hsl-saturation: 98;
    --theme-warning-color-hsl-lightness:  50;

    --atm-color-warning:        #fb8903;
    --atm-color-warning-rgb:    251, 137, 3;
    --atm-color-warning-fg:     #3c3c3c;
    --atm-color-warning-fg-rgb: 60, 60, 60;

    --atm-color-warning-hsl-hue:        32;
    --atm-color-warning-hsl-saturation: 98;
    --atm-color-warning-hsl-lightness:  50;

    /* error */
    /* -------------------------------------------------- */

    --theme-error-color:        #e81c11;
    --theme-error-color-rgb:    232, 28, 17;
    --theme-error-color-fg:     #ffffff;
    --theme-error-color-fg-rgb: 255, 255, 255;

    --theme-error-color-hsl-hue:        3;
    --theme-error-color-hsl-saturation: 86;
    --theme-error-color-hsl-lightness:  49;

    --atm-color-error:        #e81c11;
    --atm-color-error-rgb:    232, 28, 17;
    --atm-color-error-fg:     #ffffff;
    --atm-color-error-fg-rgb: 255, 255, 255;

    --atm-color-error-hsl-hue:        3;
    --atm-color-error-hsl-saturation: 86;
    --atm-color-error-hsl-lightness:  49;

    /* header */
    /* -------------------------------------------------- */

    --theme-header-bg-color:        var(--theme-secondary-color);
    --theme-header-bg-color-rgb:    var(--theme-secondary-color-rgb);
    --theme-header-bg-color-fg:     var(--theme-secondary-color-fg);
    --theme-header-bg-color-fg-rgb: var(--theme-secondary-color-fg-rgb);

    --atm-color-background-header:        var(--atm-color-secondary);
    --atm-color-background-header-rgb:    var(--atm-color-secondary-rgb);
    --atm-color-background-header-fg:     var(--atm-color-secondary-fg);
    --atm-color-background-header-fg-rgb: var(--atm-color-secondary-fg-rgb);

    --atm-color-background-header-hsl-hue:        var(--atm-color-secondary-hsl-hue);
    --atm-color-background-header-hsl-saturation: var(--atm-color-secondary-hsl-saturation);
    --atm-color-background-header-hsl-lightness:  var(--atm-color-secondary-hsl-lightness);

    /* sidebar */
    /* -------------------------------------------------- */

    --theme-sidebar-bg-color:        var(--theme-secondary-color);
    --theme-sidebar-bg-color-rgb:    var(--theme-secondary-color-rgb);
    --theme-sidebar-bg-color-fg:     var(--theme-secondary-color-fg);
    --theme-sidebar-bg-color-fg-rgb: var(--theme-secondary-color-fg-rgb);

    --atm-color-background-sidebar:        var(--atm-color-secondary);
    --atm-color-background-sidebar-rgb:    var(--atm-color-secondary-rgb);
    --atm-color-background-sidebar-fg:     var(--atm-color-secondary-fg);
    --atm-color-background-sidebar-fg-rgb: var(--atm-color-secondary-fg-rgb);

    --atm-color-background-sidebar-hsl-hue:        var(--atm-color-secondary-hsl-hue);
    --atm-color-background-sidebar-hsl-saturation: var(--atm-color-secondary-hsl-saturation);
    --atm-color-background-sidebar-hsl-lightness:  var(--atm-color-secondary-hsl-lightness);

    /* footer */
    /* -------------------------------------------------- */

    --theme-footer-bg-color:        var(--theme-secondary-color);
    --theme-footer-bg-color-rgb:    var(--theme-secondary-color-rgb);
    --theme-footer-bg-color-fg:     var(--theme-secondary-color-fg);
    --theme-footer-bg-color-fg-rgb: var(--theme-secondary-color-fg-rgb);

    --atm-color-background-footer:        var(--atm-color-secondary);
    --atm-color-background-footer-rgb:    var(--atm-color-secondary-rgb);
    --atm-color-background-footer-fg:     var(--atm-color-secondary-fg);
    --atm-color-background-footer-fg-rgb: var(--atm-color-secondary-fg-rgb);

    --atm-color-background-footer-hsl-hue:        var(--atm-color-secondary-hsl-hue);
    --atm-color-background-footer-hsl-saturation: var(--atm-color-secondary-hsl-saturation);
    --atm-color-background-footer-hsl-lightness:  var(--atm-color-secondary-hsl-lightness);

    /* neutrals - deprecated since v26 */
    /* -------------------------------------------------- */

    --theme-dark-gray:       #333333;
    --theme-dark-gray-rgb:   51, 51, 51;
    --theme-medium-gray:     #6b6866;
    --theme-medium-gray-rgb: 107, 104, 102;
    --theme-soft-gray:       #95908e;
    --theme-soft-gray-rgb:   149, 144, 142;
    --theme-light-gray:      #f2f1f1;
    --theme-light-gray-rgb:  242, 241, 241;
    --theme-light-gray2:     #e2e0de;
    --theme-light-gray2-rgb: 226, 224, 222;
    --theme-light-gray3:     #c0c0c0;
    --theme-light-gray3-rgb: 192, 192, 192;

    /* neutrals - v26+ */
    /* -------------------------------------------------- */

    --atm-color-neutral-0:       #ffffff;
    --atm-color-neutral-0-rgb:   255, 255, 255;
    --atm-color-neutral-100:     #f2f1f1;
    --atm-color-neutral-100-rgb: 242, 241, 241;
    --atm-color-neutral-200:     #e2e0de;
    --atm-color-neutral-200-rgb: 226, 224, 222;
    --atm-color-neutral-300:     #c0c0c0;
    --atm-color-neutral-300-rgb: 192, 192, 192;
    --atm-color-neutral-400:     #95908e;
    --atm-color-neutral-400-rgb: 149, 144, 142;
    --atm-color-neutral-500:     #6b6866;
    --atm-color-neutral-500-rgb: 107, 104, 102;
    --atm-color-neutral-600:     #333333;
    --atm-color-neutral-600-rgb: 51, 51, 51;

    /* gray 1-5 - deprecated since v6 */
    /* -------------------------------------------------- */

    --gray1:     #e6e6e6;
    --gray1-rgb: 230, 230, 230;

    --gray2:     #cccccc;
    --gray2-rgb: 204, 204, 204;

    --gray3:     #999999;
    --gray3-rgb: 153, 153, 153;

    --gray4:     #666666;
    --gray4-rgb: 102, 102, 102;

    --gray5:     #333333;
    --gray5-rgb: 51, 51, 51;

    /* Deprecated since v6 */
    --background:     #f9f9f9;
    --background-rgb: 249, 249, 249;

    /* Deprecated since v6 */
    --border:     #e1e1e1;
    --border-rgb: 225, 225, 225;

    --white:     #ffffff;
    --white-rgb: 255, 255, 255;

    --black:     #000000;
    --black-rgb: 0, 0, 0;

    /* misc */
    /* -------------------------------------------------- */

    --theme-page-loader-circle-color: #ffffff;

    --atm-color-page-loader-circle: #ffffff;

    --theme-sidebar-bg-menu-item-color: #ffffff;
    --theme-sidebar-bg-menu-item-color-rgb: 255, 255, 255;

    --atm-color-sidebar-menu-item: #ffffff;
    --atm-color-sidebar-menu-item-rgb: 255, 255, 255;

    /* 10% darker of #077fe5 */
    --rank-completion-marker-earned-bg-color: #0671cc;

    /* 10% darker of accent */
    --atm-color-rank-completion-marker-earned: #8b40b7;

    /* color design tokens - v26+ */
    /* -------------------------------------------------- */

    --atm-color-text-heading:           var(--atm-color-neutral-600);
    --atm-color-text-heading-rgb:       var(--atm-color-neutral-600-rgb);
    --atm-color-text-subheading:        var(--atm-color-neutral-600);
    --atm-color-text-subheading-rgb:    var(--atm-color-neutral-600-rgb);
    --atm-color-text-body:              var(--atm-color-neutral-600);
    --atm-color-text-body-rgb:          var(--atm-color-neutral-600-rgb);
    /* note: no infocus hex value */
    --atm-color-background-infocus-rgb: rgba(var(--atm-color-primary-rgb), 0.1);
    --atm-color-background-nofocus:     var(--atm-color-neutral-100);
    --atm-color-background-nofocus-rgb: var(--atm-color-neutral-100-rgb);

    /* border radii */
    /* -------------------------------------------------- */

    --theme-border-radius-hard:  0;
    --theme-border-radius-soft1: 6px;
    --theme-border-radius-soft2: 12px;
    --theme-border-radius-round: 100px;
    --theme-border-radius-soft1-left:  6px 0px 0px 6px;
    --theme-border-radius-soft1-right: 0px 6px 6px 0px;
    --theme-border-radius-soft2-left:  12px 0px 0px 12px;
    --theme-border-radius-soft2-right: 0px 12px 12px 0px;
    --theme-border-radius-round-left:  100px 0px 0px 100px;
    --theme-border-radius-round-right: 0px 100px 100px 0px;

    /* box shadows */
    /* -------------------------------------------------- */

    --theme-box-shadow-100: 4px 6px 16px 3px rgba(0, 0, 0, 0.1);
    --theme-box-shadow-200: 4px 6px 16px 3px rgba(0, 0, 0, 0.2);

    /* fonts - deprecated since v26 */
    /* -------------------------------------------------- */

    --theme-font-family-heading: 'Rubik', sans-serif;
    --theme-font-family-body:    'Roboto', sans-serif;

    --theme-font-weight-heading: 500;

    /* fonts - v26+ */
    /* -------------------------------------------------- */

    /* font weights - v26+ */
    /* -------------------------------------------------- */

    --atm-font-weight-regular: 400;
    --atm-font-weight-bold:    700;

    /* font variables - v26+ */
    /* -------------------------------------------------- */

    --atm-font-body-2xs:        var(--atm-font-weight-regular) 0.625rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;  /* 10px / 16px = 0.625rem, 150% = 1.5 */
    --atm-font-body-2xs-bold:   var(--atm-font-weight-bold)    0.625rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;
    --atm-font-body-xs:         var(--atm-font-weight-regular) 0.75rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;   /* 12px / 16px = 0.75rem */
    --atm-font-body-xs-bold:    var(--atm-font-weight-bold)    0.75rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;
    --atm-font-body-sm:         var(--atm-font-weight-regular) 0.875rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;  /* 14px / 16px = 0.875rem */
    --atm-font-body-sm-bold:    var(--atm-font-weight-bold)    0.875rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;
    --atm-font-body:            var(--atm-font-weight-regular) 1rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;      /* 16px / 16px = 1rem */
    --atm-font-body-bold:       var(--atm-font-weight-bold)    1rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;
    --atm-font-button:          var(--atm-font-weight-bold)    1rem Inter, Arial, Helvetica Neue, sans-serif;          /* 16px / 16px = 1rem, line-height omitted as in original */
    --atm-font-label:           var(--atm-font-weight-bold)    1rem/1.5 Inter, Arial, Helvetica Neue, sans-serif;
    --atm-font-label-component: var(--atm-font-weight-regular) 1rem/1.4 Inter, Arial, Helvetica Neue, sans-serif;      /* 16px / 16px = 1rem, 140% = 1.4 */
    --atm-font-heading-h4:      var(--atm-font-weight-bold)    1.125rem/1.3 Inter, Arial, Helvetica Neue, sans-serif;  /* 18px / 16px = 1.125rem, 130% = 1.3 */
    --atm-font-heading-h3:      var(--atm-font-weight-bold)    1.4375rem/1.3 Inter, Arial, Helvetica Neue, sans-serif; /* 23px / 16px = 1.4375rem */
    --atm-font-heading-h2:      var(--atm-font-weight-bold)    1.75rem/1.3 Inter, Arial, Helvetica Neue, sans-serif;   /* 28px / 16px = 1.75rem */
    --atm-font-heading-h1:      var(--atm-font-weight-bold)    2.0625rem/1.3 Inter, Arial, Helvetica Neue, sans-serif; /* 33px / 16px = 2.0625rem */

    /* font design tokens - v26+ */
    /* -------------------------------------------------- */

    --atm-font-section-heading-xs:    var(--atm-font-heading-h3);
    --atm-font-section-heading-sm:    var(--atm-font-heading-h3);
    --atm-font-section-heading-md:    var(--atm-font-heading-h3);
    --atm-font-section-heading-lg:    var(--atm-font-heading-h3);
    --atm-font-section-heading-xl:    var(--atm-font-heading-h3);
    --atm-font-section-subheading-xs: var(--atm-font-heading-h4);
    --atm-font-section-subheading-sm: var(--atm-font-heading-h4);
    --atm-font-section-subheading-md: var(--atm-font-heading-h4);
    --atm-font-section-subheading-lg: var(--atm-font-heading-h4);
    --atm-font-section-subheading-xl: var(--atm-font-heading-h4);
    --atm-font-section-body:          var(--atm-font-body);

    /* spacing - deprecated since v26 */
    /* -------------------------------------------------- */

    --theme-spacing-extra-small:       0.25rem; /* ~4px */
    --theme-spacing-small:             0.5rem;  /* ~8px */
    --theme-spacing-medium:            1rem;    /* ~16px */
    --theme-spacing-large:             2rem;    /* ~32px */
    --theme-spacing-extra-large:       3rem;    /* ~48px */
    --theme-spacing-extra-extra-large: 4rem;    /* ~64px */

    /* css transitions */
    /* -------------------------------------------------- */

    --theme-transition-duration: 150ms;
    --theme-transition-timing-function: ease;

    /* spacing - v26+ */
    /* -------------------------------------------------- */

    --atm-space-0:    0rem;
    --atm-space-025:  0.125rem; /* ~2px */
    --atm-space-050:  0.25rem;  /* ~4px */
    --atm-space-100:  0.5rem;   /* ~8px */
    --atm-space-200:  1rem;     /* ~16px */
    --atm-space-300:  1.5rem;   /* ~24px */
    --atm-space-400:  2rem;     /* ~32px */
    --atm-space-500:  2.5rem;   /* ~40px */
    --atm-space-600:  3rem;     /* ~48px */
    --atm-space-750:  3.75rem;  /* ~60px */
    --atm-space-800:  4rem;     /* ~64px */
    --atm-space-1000: 5rem;     /* ~80px */
    --atm-space-1600: 8rem;     /* ~128px */

    /* space design tokens - sections - v26+ */
    /* -------------------------------------------------- */

    --atm-space-sections-between-xs: var(--atm-space-500);
    --atm-space-sections-between-sm: var(--atm-space-500);
    --atm-space-sections-between-md: var(--atm-space-500);
    --atm-space-sections-between-lg: var(--atm-space-600);
    --atm-space-sections-between-xl: var(--atm-space-600);
    --atm-space-sections-within-xs:  var(--atm-space-200);
    --atm-space-sections-within-sm:  var(--atm-space-200);
    --atm-space-sections-within-md:  var(--atm-space-200);
    --atm-space-sections-within-lg:  var(--atm-space-200);
    --atm-space-sections-within-xl:  var(--atm-space-200);

    /* space design tokens - margins - v26+ */
    /* -------------------------------------------------- */

    --atm-space-margins-vertical-xs:   var(--atm-space-300);
    --atm-space-margins-vertical-sm:   var(--atm-space-300);
    --atm-space-margins-vertical-md:   var(--atm-space-400);
    --atm-space-margins-vertical-lg:   var(--atm-space-600);
    --atm-space-margins-vertical-xl:   var(--atm-space-600);
    --atm-space-margins-horizontal-xs: var(--atm-space-200);
    --atm-space-margins-horizontal-sm: var(--atm-space-400);
    --atm-space-margins-horizontal-md: var(--atm-space-600);
    --atm-space-margins-horizontal-lg: var(--atm-space-750);
    --atm-space-margins-horizontal-xl: var(--atm-space-1600);
}