.wds-sentiment-surface {
  &--hasBaseStyles {
    background-color: var(--color-sentiment-background-surface);
    color: var(--color-sentiment-content-primary);
  }

  &-negative {
    .np-theme-personal&,
    .np-theme-business&,
    .np-theme-platform&,
    .np-theme-personal--bright-green&,
    .np-theme-business--bright-green& {
      &-base {
        .sentiment-surface-tokens(
                    #CB272F, #B8232B, #A72027,
                    #CB272F, #B8232B, #A72027,
                    #FBEAEA, #F9E1E1, #F8D8D8,
                    #F5D3D4, #F0BDBE, #ECACAD,
                    #FBEAEA, #F9E1E1, #F8D8D8,
                    #FBEAEA, #F9E1E1, #F8D8D8
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #FFFFFF, #F5CCCC, #F1B7B7,
                    #FBEAEA, #F5CCCC, #F1B7B7,
                    #CB272F, #B8232B, #A72027,
                    #9B141B, #831116, #6D0e13,
                    #CB272F, #B8232B, #A72027,
                    #CB272F, #B8232B, #A72027
                );
      }
    }

    .np-theme-personal--dark&,
    .np-theme-business--dark&,
    .np-theme-personal--forest-green&,
    .np-theme-business--forest-green&,
    .np-theme-platform--forest-green& {
      &-base {
        .sentiment-surface-tokens(
                    #FFA8AD, #FFBDC0, #FFD1D3,
                    #FFA8AD, #FFBDC0, #FFD1D3,
                    #410B0D, #641115, #761418,
                    #601013, #7A1519, #90181D,
                    #410B0D, #641115, #761418,
                    #410B0D, #641115, #761418
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #410B0D, #641115, #761418,
                    #410B0D, #641115, #761418,
                    #FFA8AD, #FFBDC0, #FFD1D3,
                    #D9898D, #D68084, #D06C71,
                    #FFA8AD, #FFBDC0, #FFD1D3,
                    #FFA8AD, #FFBDC0, #FFD1D3
                );
      }
    }
  }

  &-warning {
    .np-theme-personal&,
    .np-theme-business&,
    .np-theme-platform&,
    .np-theme-personal--bright-green&,
    .np-theme-business--bright-green& {
      &-base {
        .sentiment-surface-tokens(
                    #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-primary
                    #FFF7D7, #FFF0B2, #FFE98F,  // interactive-secondary
                    #FFEC9E, #FFE187, #FFD55F,  // interactive-secondary-neutral
                    #4A3B1C, #302612, #2C2311,  // interactive-control
                    #FFF7D7, #FFF0B2, #FFE98F   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #4A3B1C, #302612, #2C2311,  // content-primary
                    #4A3B1C, #302612, #2C2311,  // interactive-primary
                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-secondary
                    #FFEC9E, #FFEDB8, #FFF2CC,  // interactive-secondary-neutral
                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-control
                    #FFD11A, #FFBF0F, #FFBB00   // background-surface
                );
      }
    }

    .np-theme-personal--dark&,
    .np-theme-business--dark&,
    .np-theme-personal--forest-green&,
    .np-theme-business--forest-green&,
    .np-theme-platform--forest-green& {
      &-base {
        .sentiment-surface-tokens(
                    #FADC65, #F9D648, #F8CD20,  // content-primary
                    #FADC65, #F9D648, #F8CD20,  // interactive-primary
                    #3A3523, #504930, #665D3D,  // interactive-secondary
                    #4D462A, #5D532F, #685D33,  // interactive-secondary-neutral
                    #3A3523, #504930, #665D3D,  // interactive-control
                    #3A3523, #504930, #665D3D   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #3A3523, #504930, #665D3D,  // content-primary
                    #3A3523, #504930, #665D3D,  // interactive-primary
                    #FADC65, #F9D648, #F8CD20,  // interactive-secondary
                    #E3C85D, #DFC044, #D9B526,  // interactive-secondary-neutral
                    #FADC65, #F9D648, #F8CD20,  // interactive-control
                    #FADC65, #F9D648, #F8CD20   // background-surface
                );
      }
    }
  }
  &-success {
    .np-theme-personal&,
    .np-theme-business&,
    .np-theme-platform&,
    .np-theme-personal--bright-green&,
    .np-theme-business--bright-green& {
      &-base {
        .sentiment-surface-tokens(
                    #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
                    #054D28, #043A1E, #022614,  // interactive-primary
                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-secondary
                    #BCD9B8, #AACFA5, #94C38E,  // interactive-secondary-neutral
                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-control
                    #E2F6D5, #D3F2C0, #C5EDAB   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
                    #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
                    #054D28, #043A1E, #022614,  // interactive-secondary
                    #256A43, #2A794C, #329057,  // interactive-secondary-neutral
                    #054D28, #043A1E, #022614,  // interactive-control
                    #054D28, #043A1E, #022614   // background-surface
                );
      }
    }

    .np-theme-personal--dark&,
    .np-theme-business--dark&,
    .np-theme-personal--forest-green&,
    .np-theme-business--forest-green&,
    .np-theme-platform--forest-green& {
      &-base {
        .sentiment-surface-tokens(
                   #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
                   #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
                   #054D28, #043A1E, #022614,  // interactive-secondary
                   #256A43, #2A794C, #329057,  // interactive-secondary-neutral
                   #054D28, #043A1E, #022614,  // interactive-control
                   #054D28, #043A1E, #022614   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #252C20, #323B2B, #3E4A36,  // content-primary
                    #252C20, #323B2B, #3E4A36,  // interactive-primary
                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-secondary
                    #A8CF91, #94C478, #83BB63,  // interactive-secondary-neutral
                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-control
                    #BAE5A0, #C8EAB3, #D6F0C7   // background-surface
                );
      }
    }
  }
  &-neutral {
    .np-theme-personal&,
    .np-theme-business&,
    .np-theme-platform&,
    .np-theme-personal--bright-green&,
    .np-theme-business--bright-green& {
      &-base {
        .sentiment-surface-tokens(
                    #454745, #353635, #232423,                                            // content-primary (default, hover, active)
                    #454745, #353635, #232423,                                            // interactive-primary
                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary
                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary-neutral
                    #F1F1ED, #E7E7E1, #DFDED5,                                            // interactive-control
                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17)  // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                    #454745, #353635, #232423,  // interactive-secondary
                    #585958, #6A6C6A, #7D7E7D,  // interactive-secondary-neutral
                    #454745, #353635, #232423,  // interactive-control
                    #454745, #353635, #232423   // background-surface
                );
      }
    }

    .np-theme-personal--dark&,
    .np-theme-business--dark&,
    .np-theme-personal--forest-green&,
    .np-theme-business--forest-green&,
    .np-theme-platform--forest-green& {
      &-base {
        .sentiment-surface-tokens(
                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // interactive-primary
                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary
                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary-neutral
                    #2A2C29, #414441, #595B58,                                                       // interactive-control
                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30)   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #2A2C29, #414441, #595B58,  // content-primary
                    #2A2C29, #414441, #595B58,  // interactive-primary
                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
                );
      }
    }
  }
  &-proposition {
    .np-theme-personal&,
    .np-theme-business&,
    .np-theme-platform&,
    .np-theme-personal--bright-green&,
    .np-theme-business--bright-green& {
      &-base {
        .sentiment-surface-tokens(
                    #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
                    #054D4D, #043A3A, #022626,  // interactive-primary
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
                    #054D4D, #043A3A, #022626,  // interactive-secondary
                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
                    #054D4D, #043A3A, #022626,  // interactive-control
                    #054D4D, #043A3A, #022626   // background-surface
                );
      }
    }

    .np-theme-personal--dark&,
    .np-theme-business--dark&,
    .np-theme-personal--forest-green&,
    .np-theme-business--forest-green&,
    .np-theme-platform--forest-green& {
      &-base {
        .sentiment-surface-tokens(
                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
                    #054D4D, #043A3A, #022626,  // interactive-secondary
                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
                    #054D4D, #043A3A, #022626,  // interactive-control
                    #054D4D, #043A3A, #022626   // background-surface
                );
      }
      &-elevated {
        .sentiment-surface-tokens(
                    #0E0F0C, #0A2826, #074140,  // content-primary
                    #0B312F, #104744, #16605C,  // interactive-primary
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
                );
      }
    }
  }

  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
}

.sentiment-surface-tokens(
    @content-primary,
    @content-primary-hover,
    @content-primary-active,
    @interactive-primary,
    @interactive-primary-hover,
    @interactive-primary-active,
    @interactive-secondary,
    @interactive-secondary-hover,
    @interactive-secondary-active,
    @interactive-secondary-neutral,
    @interactive-secondary-neutral-hover,
    @interactive-secondary-neutral-active,
    @interactive-control,
    @interactive-control-hover,
    @interactive-control-active,
    @background-surface,
    @background-surface-hover,
    @background-surface-active
) {
  --color-sentiment-content-primary: @content-primary;
  --color-sentiment-content-primary-hover: @content-primary-hover;
  --color-sentiment-content-primary-active: @content-primary-active;

  --color-sentiment-interactive-primary: @interactive-primary;
  --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
  --color-sentiment-interactive-primary-active: @interactive-primary-active;

  --color-sentiment-interactive-secondary: @interactive-secondary;
  --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
  --color-sentiment-interactive-secondary-active: @interactive-secondary-active;

  --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
  --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
  --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;

  --color-sentiment-interactive-control: @interactive-control;
  --color-sentiment-interactive-control-hover: @interactive-control-hover;
  --color-sentiment-interactive-control-active: @interactive-control-active;

  --color-sentiment-background-surface: @background-surface;
  --color-sentiment-background-surface-hover: @background-surface-hover;
  --color-sentiment-background-surface-active: @background-surface-active;
}