:root {
  /* Primary Colors */
  --primary-blue: #205781;
  --primary-blue-dark: #1a4a6b;
  --primary-blue-light: #3a6ea5;
  --primary-blue-lighter: #eff6ff;
  
  /* Secondary Colors */
  --primary-red: #c41a1b;
  --primary-red-dark: #a01515;
  --primary-red-light: #e74c3c;
  --primary-red-lighter: #fef2f2;
  
  /* Neutral Colors */
  --neutral-dark: #1a2b4d;
  --neutral-medium: #52617A;
  --neutral-light: #eef2f7;
  
  /* Gradient Definitions */
  --gradient-blue: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  --gradient-red: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
  --gradient-text: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-red) 100%);
  
  /* Shadow Definitions */
  --shadow-blue: 0 4px 12px rgba(32, 87, 129, 0.3);
  --shadow-blue-hover: 0 6px 20px rgba(32, 87, 129, 0.4);
  --shadow-red: 0 4px 12px rgba(196, 26, 27, 0.3);
  --shadow-red-hover: 0 6px 20px rgba(196, 26, 27, 0.4);
}

/* Utility Classes for Colors */
.text-primary {
  color: var(--primary-blue);
}

.text-secondary {
  color: var(--primary-red);
}

.bg-primary {
  background-color: var(--primary-blue);
}

.bg-secondary {
  background-color: var(--primary-red);
}

.bg-gradient-primary {
  background: var(--gradient-blue);
}

.bg-gradient-secondary {
  background: var(--gradient-red);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover States */
.hover-primary:hover {
  color: var(--primary-blue);
}

.hover-secondary:hover {
  color: var(--primary-red);
}

.hover-bg-primary:hover {
  background-color: var(--primary-blue-lighter);
}

.hover-bg-secondary:hover {
  background-color: var(--primary-red-lighter);
}

/* Shadow Utilities */
.shadow-primary {
  box-shadow: var(--shadow-blue);
}

.shadow-primary-hover:hover {
  box-shadow: var(--shadow-blue-hover);
}

.shadow-secondary {
  box-shadow: var(--shadow-red);
}

.shadow-secondary-hover:hover {
  box-shadow: var(--shadow-red-hover);
}