:root {
  /* Main Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-overlay: #d3d3d37d;

  /* Background Colors */
  --bg-primary: var(--color-white);
  --bg-secondary: #F5F5F5;
  --bg-card: #FAFAFA;
  
  /* Text Colors */
  --text-primary: var(--color-black);
  --text-secondary: #666666;
  --text-heading: #4A4A4A;
  
  /* UI Elements */
  --border-color: #E0E0E0;
  
  /* Interactive Colors */
  --hover-overlay: var(--color-overlay);
  --button-primary: #2D2D2D;
  --button-primary-hover: #404040;
  --button-secondary: #E8E8E8;
  --button-secondary-hover: #D1D1D1;
  
  /* Accent Colors */
  --accent-primary: #4A4A4A;
  --accent-secondary: #757575;
  
  /* Status Colors */
  --color-success: #4CAF50;
  --color-error: #F44336;
  --color-warning: #FFC107;
  --color-info: #2196F3;
}

/* Example Usage */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

.secondary-text {
  color: var(--text-secondary) !important;
}

.button-primary {
  background-color: var(--button-primary) !important;
  color: var(--color-white) !important;
}

.button-primary:hover {
  background-color: var(--button-primary-hover);
}

.button-secondary {
  background-color: var(--button-secondary) !important;
  color: var(--text-primary) !important;
}

.button-secondary:hover {
  background-color: var(--button-secondary-hover);
}

/* Modal Overlay */
.modal-overlay {
  background-color: var(--hover-overlay);
}

/* Status Messages */
.success-message {
  color: var(--color-success);
}

.error-message {
  color: var(--color-error);
}

.warning-message {
  color: var(--color-warning);
}

.info-message {
  color: var(--color-info);
}

/* Border Utilities */
.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.border {
  border: 1px solid var(--border-color);
}

/* Background Utilities */
.bg-secondary {
  background-color: var(--bg-secondary);
}