:root {
  /* Primary Colors */
  --color-primary: #de3163;
  --color-primary-hover: #fa0c64;
  --color-primary-active: #fd136a;
  --color-primary-light: #ff2072;
  --color-primary-dark: #e7055a;

  /* Dark Accents */
  --color-slate: #0e2228;
  --color-dark-purple: #261e43;
  --color-navy: #1b1f3c;

  /* Blue & Purple Accents */
  --color-royal-blue: #133796;
  --color-bright-blue: #1442a7;
  --color-azure: #1255c1;
  --color-navy-blue: #152c78;

  /* Light Accents */
  --color-sky-blue: #8dd3fa;
  --color-cool-gray: #cfe1f5;
  --color-soft-blue: #c5e2f7;
  --color-soft-purple: #a579d4;
  --color-steel-blue: #c9d0e0;

  /* Additional Semantic Colors */
  --color-background: #f4f7fa;
  --color-text-primary: #0e2228;
  --color-text-secondary: #4a5568;
  --color-border: #e2e8f0;
}

/* Global Reset and Base Styles */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}