@layer starter, reset, base, state, application;

.bg-danger-default {background-color: var(--background-color-danger, #e13212)}
.bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
.bg-default {background-color: var(--background-color, #ffffff)}
.bg-disabled {background-color: var(--background-color-disabled, #606162)}
.bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
.bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
.bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
.bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
.bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
.bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
.bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
.bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
.bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
.bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
.bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
.bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
.bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
.bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
.bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
.bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
.bg-status-danger {background-color: var(--status-color-danger, #e13212)}
.bg-status-info {background-color: var(--status-color-info, #0265DC)}
.bg-status-success {background-color: var(--status-color-success, #007A4D)}
.bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
.bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
.bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
.bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
.bg-success-default {background-color: var(--background-color-success, #007A4D)}
.bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
.bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
.border-color-danger {border-color: var(--border-color-danger, #e13212)}
.border-color-default {border-color: var(--border-color, #949596)}
.border-color-primary {border-color: var(--border-color-primary, #0265DC)}
.border-color-status-info {border-color: var(--status-color-info, #0265DC)}
.border-color-status-success {border-color: var(--status-color-success, #007A4D)}
.border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
.border-color-strong {border-color: var(--border-color-strong, #444445)}
.border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
.border-color-success {border-color: var(--border-color-success, #007A4D)}
.c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
.c-active-primary {color: var(--foreground-color-active-primary, #004491)}
.c-danger {color: var(--foreground-color-danger, #e13212)}
.c-default {color: var(--foreground-color, #141414)}
.c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
.c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
.c-inverted {color: var(--foreground-color-inverted, #ffffff)}
.c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
.c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
.c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
.c-on-warning {color: var(--foreground-color-on-warning, #141414)}
.c-primary {color: var(--foreground-color-primary, #0265DC)}
.c-status-danger {color: var(--status-color-danger, #e13212)}
.c-status-info {color: var(--status-color-info, #0265DC)}
.c-status-success {color: var(--status-color-success, #007A4D)}
.c-status-warning {color: var(--status-color-warning, #ffbe00)}
.c-subdued {color: var(--foreground-color-subdued, #737475)}

@supports (color: light-dark(#fff, #000)) {
  .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
  .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
  .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
  .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
  .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
  .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
  .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
  .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
  .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
  .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
  .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
  .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
  .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
  .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
  .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
  .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
  .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
  .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
  .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
  .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
  .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
  .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
  .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
  .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
  .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
  .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
  .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
  .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
  .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
  .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
  .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
  .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
  .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
  .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
  .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
  .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
  .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
  .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
  .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
  .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
  .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
  .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
  .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
  .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
  .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
  .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
  .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
  .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
  .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
  .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
  .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
  .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
  .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
  .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
  .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
  .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
}
    
@layer application {
  .bg-danger-default {background-color: var(--background-color-danger, #e13212)}
  .bg-danger-subdued {background-color: var(--background-color-danger-subdued, #ffece9)}
  .bg-default {background-color: var(--background-color, #ffffff)}
  .bg-disabled {background-color: var(--background-color-disabled, #606162)}
  .bg-inverted-default {background-color: var(--background-color-inverted, #2d2e31)}
  .bg-inverted-strong {background-color: var(--background-color-inverted-strong, #141414)}
  .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, #e132124D)}
  .bg-overlay-active-default {background-color: var(--overlay-color-active, #14141429)}
  .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, #14141466)}
  .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, #14141429)}
  .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, #14141466)}
  .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, #0265DC4D)}
  .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, #e132121A)}
  .bg-overlay-hover-default {background-color: var(--overlay-color-hover, #14141414)}
  .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, #14141433)}
  .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, #14141414)}
  .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, #14141433)}
  .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, #0265DC1A)}
  .bg-primary-default {background-color: var(--background-color-primary, #0265DC)}
  .bg-primary-subdued {background-color: var(--background-color-primary-subdued, #E0F2FF)}
  .bg-status-danger {background-color: var(--status-color-danger, #e13212)}
  .bg-status-info {background-color: var(--status-color-info, #0265DC)}
  .bg-status-success {background-color: var(--status-color-success, #007A4D)}
  .bg-status-warning {background-color: var(--status-color-warning, #ffbe00)}
  .bg-strong {background-color: var(--background-color-strong, #f7f7f7)}
  .bg-stronger {background-color: var(--background-color-stronger, #eeeeee)}
  .bg-strongest {background-color: var(--background-color-strongest, #bcbcbd)}
  .bg-success-default {background-color: var(--background-color-success, #007A4D)}
  .bg-success-subdued {background-color: var(--background-color-success-subdued, #CEF8E0)}
  .bg-warning-default {background-color: var(--background-color-warning, #ffbe00)}
  .border-color-danger {border-color: var(--border-color-danger, #e13212)}
  .border-color-default {border-color: var(--border-color, #949596)}
  .border-color-primary {border-color: var(--border-color-primary, #0265DC)}
  .border-color-status-info {border-color: var(--status-color-info, #0265DC)}
  .border-color-status-success {border-color: var(--status-color-success, #007A4D)}
  .border-color-status-warning {border-color: var(--status-color-warning, #ffbe00)}
  .border-color-strong {border-color: var(--border-color-strong, #444445)}
  .border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
  .border-color-success {border-color: var(--border-color-success, #007A4D)}
  .c-active-danger {color: var(--foreground-color-active-danger, #bf2a00)}
  .c-active-primary {color: var(--foreground-color-active-primary, #004491)}
  .c-danger {color: var(--foreground-color-danger, #e13212)}
  .c-default {color: var(--foreground-color, #141414)}
  .c-hover-danger {color: var(--foreground-color-hover-danger, #bf2a00)}
  .c-hover-primary {color: var(--foreground-color-hover-primary, #004491)}
  .c-inverted {color: var(--foreground-color-inverted, #ffffff)}
  .c-on-danger-default {color: var(--foreground-color-on-danger, #ffffff)}
  .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, #bf2a00)}
  .c-on-primary {color: var(--foreground-color-on-primary, #ffffff)}
  .c-on-warning {color: var(--foreground-color-on-warning, #141414)}
  .c-primary {color: var(--foreground-color-primary, #0265DC)}
  .c-status-danger {color: var(--status-color-danger, #e13212)}
  .c-status-info {color: var(--status-color-info, #0265DC)}
  .c-status-success {color: var(--status-color-success, #007A4D)}
  .c-status-warning {color: var(--status-color-warning, #ffbe00)}
  .c-subdued {color: var(--foreground-color-subdued, #737475)}
  
  @supports (color: light-dark(#fff, #000)) {
    .bg-danger-default {background-color: var(--background-color-danger, light-dark(#e13212, #ff745f))}
    .bg-danger-subdued {background-color: var(--background-color-danger-subdued, light-dark(#ffece9, #ff745f33))}
    .bg-default {background-color: var(--background-color, light-dark(#ffffff, #141414))}
    .bg-disabled {background-color: var(--background-color-disabled, light-dark(#606162, #606162))}
    .bg-inverted-default {background-color: var(--background-color-inverted, light-dark(#2d2e31, #fafafa))}
    .bg-inverted-strong {background-color: var(--background-color-inverted-strong, light-dark(#141414, #ffffff))}
    .bg-overlay-active-danger {background-color: var(--overlay-color-active-danger, light-dark(#e132124D, #f94d3240))}
    .bg-overlay-active-default {background-color: var(--overlay-color-active, light-dark(#14141429, #ffffff29))}
    .bg-overlay-active-on-danger {background-color: var(--overlay-color-active-on-danger, light-dark(#14141466, #14141429))}
    .bg-overlay-active-on-default {background-color: var(--overlay-color-active-on, light-dark(#14141429, #14141429))}
    .bg-overlay-active-on-primary {background-color: var(--overlay-color-active-on-primary, light-dark(#14141466, #14141429))}
    .bg-overlay-active-primary {background-color: var(--overlay-color-active-primary, light-dark(#0265DC4D, #78BBFA40))}
    .bg-overlay-hover-danger {background-color: var(--overlay-color-hover-danger, light-dark(#e132121A, #f94d3226))}
    .bg-overlay-hover-default {background-color: var(--overlay-color-hover, light-dark(#14141414, #ffffff14))}
    .bg-overlay-hover-on-danger {background-color: var(--overlay-color-hover-on-danger, light-dark(#14141433, #ffffff29))}
    .bg-overlay-hover-on-default {background-color: var(--overlay-color-hover-on, light-dark(#14141414, #ffffff14))}
    .bg-overlay-hover-on-primary {background-color: var(--overlay-color-hover-on-primary, light-dark(#14141433, #ffffff29))}
    .bg-overlay-hover-primary {background-color: var(--overlay-color-hover-primary, light-dark(#0265DC1A, #78BBFA1A))}
    .bg-primary-default {background-color: var(--background-color-primary, light-dark(#0265DC, #78BBFA))}
    .bg-primary-subdued {background-color: var(--background-color-primary-subdued, light-dark(#E0F2FF, #78BBFA33))}
    .bg-status-danger {background-color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
    .bg-status-info {background-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
    .bg-status-success {background-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
    .bg-status-warning {background-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
    .bg-strong {background-color: var(--background-color-strong, light-dark(#f7f7f7, #2d2e31))}
    .bg-stronger {background-color: var(--background-color-stronger, light-dark(#eeeeee, #444445))}
    .bg-strongest {background-color: var(--background-color-strongest, light-dark(#bcbcbd, #737475))}
    .bg-success-default {background-color: var(--background-color-success, light-dark(#007A4D, #49CC93))}
    .bg-success-subdued {background-color: var(--background-color-success-subdued, light-dark(#CEF8E0, #49CC9333))}
    .bg-warning-default {background-color: var(--background-color-warning, light-dark(#ffbe00, #ffe278))}
    .border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
    .border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
    .border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
    .border-color-status-info {border-color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
    .border-color-status-success {border-color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
    .border-color-status-warning {border-color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
    .border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
    .border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
    .border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
    .c-active-danger {color: var(--foreground-color-active-danger, light-dark(#bf2a00, #ff745f))}
    .c-active-primary {color: var(--foreground-color-active-primary, light-dark(#004491, #B5DEFF))}
    .c-danger {color: var(--foreground-color-danger, light-dark(#e13212, #ff745f))}
    .c-default {color: var(--foreground-color, light-dark(#141414, #ffffff))}
    .c-hover-danger {color: var(--foreground-color-hover-danger, light-dark(#bf2a00, #ff745f))}
    .c-hover-primary {color: var(--foreground-color-hover-primary, light-dark(#004491, #B5DEFF))}
    .c-inverted {color: var(--foreground-color-inverted, light-dark(#ffffff, #141414))}
    .c-on-danger-default {color: var(--foreground-color-on-danger, light-dark(#ffffff, #141414))}
    .c-on-danger-subdued {color: var(--foreground-color-on-danger-subdued, light-dark(#bf2a00, #ffffff))}
    .c-on-primary {color: var(--foreground-color-on-primary, light-dark(#ffffff, #141414))}
    .c-on-warning {color: var(--foreground-color-on-warning, light-dark(#141414, #141414))}
    .c-primary {color: var(--foreground-color-primary, light-dark(#0265DC, #78BBFA))}
    .c-status-danger {color: var(--status-color-danger, light-dark(#e13212, #ff745f))}
    .c-status-info {color: var(--status-color-info, light-dark(#0265DC, #78BBFA))}
    .c-status-success {color: var(--status-color-success, light-dark(#007A4D, #49CC93))}
    .c-status-warning {color: var(--status-color-warning, light-dark(#ffbe00, #ffe278))}
    .c-subdued {color: var(--foreground-color-subdued, light-dark(#737475, #bcbcbd))}
  }
}