/*
 * Color Palette
 * Egypt Assistance Project
 * 
 * Colors:
 * - Red: #EA312B
 * - Blue: #0a3b6c
 * - Grey: #F3F2F8
 * - White: #ffffff
 * - Gold: #FFD700
 */

:root {
  /* Primary Colors */
  --color-red: #EA312B;
  --color-blue: #0D4A87;
  --color-dark-blue: #082C51;
  --color-darker-blue: #051A2F;
  --color-grey: #F2F2F7;
  --color-white: #ffffff;
  --color-gold: #FFD700;
  --color-black: #000000;
  --color-turquoise: #4E90D4;
  
  /* Alternative naming for convenience */
  --red: #EA312B;
  --blue: #0D4A87;
  --dark-blue: #082C51;
  --darker-blue: #051A2F;
  --grey: #F2F2F7;
  --white: #ffffff;
  --gold: #FFD700;
  --black: #000000;
  --turquoise: #4E90D4;
}

/* Utility Classes */
.color-red {
  color: var(--color-red);
}

.color-blue {
  color: var(--color-blue);
}

.color-dark-blue {
  color: var(--color-dark-blue);
}

.color-darker-blue {
  color: var(--color-darker-blue);
}

.color-grey {
  color: var(--color-grey);
}

.color-white {
  color: var(--color-white);
}

.color-gold {
  color: var(--color-gold);
}

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

.color-black {
  color: var(--color-black);
}

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

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

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

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

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

.bg-turquoise {
  background-color: var(--color-turquoise);
}
.debug {
  border: 1px solid red !important;
}