:root {
  --color-primary-500: #7064E7; /* SSOC Purple (Default) */
  --color-primary-700: #51308E; /* SSOC Heavy Purple */
  --color-primary-300: #AF8EFF; /* SSOC Light Purple */

  --color-contents-100: #B6B6D1;
  --color-contents-200: #4C5A7D;
  --color-contents-300: #052460;
  --color-interaction-100: #E4DFFF;
  --color-interaction-200: #CEC5FE;
  --color-interaction-300: #AF8EFF;
  --color-interaction-400: #8B80F8;
  --color-interaction-500: #7064E7;
  --color-interaction-600: #51308E;
  --color-interaction-700: #4C5A7D;
  --color-interaction-800: #052460;

  /* Semantic Colors - Info (Blue) */
  --color-info-primary: #59AAE2;
  --color-info-light: #9BD8F9;

  /* Semantic Colors - Error (Pink/Red) */
  --color-error-primary: #E46182;
  --color-error-light: #FCB6CA;

  /* Semantic Colors - Warning (Orange/Yellow) */
  --color-warning-primary: #F6BB54;
  --color-warning-light: #F9E6D7;
}

.s-color-primary-500 {background-color: var(--color-primary-500); color:#fff}
.s-color-error-primary {background-color: var(--color-error-primary); color: #fff}