:root {
  --color-red: #DE330D;
  --color-red-light: #F24C27;
  --color-red-dark: #A32003;
  --color-red-bg: #F8D7DA;

  /* Accent Color */
  --color-purple: #4F67F3;
  --color-purple-light: #7D8FF5;
  --color-purple-dark: #404FA1;
  --color-purple-bg: #EBEEFF;

  /* Neutral color */
  --color-gray: #CCCCCC;
  --color-gray-light: #EFEFEF;
  --color-gray-dark: #72757E;
  --color-purple-gray: #F5F5FA;
  --color-black: #2C333E;

  /* Feedback color */
  --color-success: #0EDC97;
  --color-success-light: #D1ECF1;
  --color-success-dark: #155724;
  --color-warning: #FBC506;
  --color-warning-light: #FFF3CD;
  --color-warning-dark: #FBC506;
  --color-error: #DE330D;
  --color-error-light: #F8D7DA;
  --color-error-dark: #DE330D;

  /* Typography */
  --color-text: color-black;
  --color-text-subtle: color-gray-dark;
  --color-link: color-purple;
  --color-link-visited: color-purple-dark;

  /* Border */
  --color-border: color-gray;

  /* Forms */
  --color-form-border: color-gray;
  --color-form-focus: color-purple;
  --color-form-error: color-error;
  --color-form-success: color-success;

  /* Button */
  --color-button-primary: color-red;
  --color-button-primary-hover: color-red-dark;
  --color-button-primary-focus: color-red-light;
  --color-button-secondary: color-purple;
  --color-button-secondary-hover: color-purple-dark;
  --color-button-secondary-focus: color-purple-light;
}