:root {
  /* main */
  --color-light: #f8f9fa;
  --color-dark: #212529;

  /* brand */
  --color-primary: #0d71b9;
  --color-secondary: #6c757d;
  --color-accent-light: #f4c7e5;
  --color-accent: #d5299d;
  --color-accent-rgb: 213, 41, 157;
  --color-accent-dark: #ba2489;
  --color-accent-contrast: white;
  --color-accent-contrast-rgb: 255, 255, 255;

  /* feedback */
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  
  /* background */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;

  /* text */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-light: #f8f9fa;

  /* border */
  --border-color: #dee2e6;

  /* add more custom colors as needed */
}