/* WebGazer Brand Colors CSS Variables */

:root {
  /* Primary Brand Colors */
  --webgazer-primary-blue: #3A5FEB;
  --webgazer-dark-blue: #0B4550;
  --webgazer-light-cream: #F8F7F2;
  --webgazer-medium-gray: #898A8E;
  
  /* Additional Colors */
  --webgazer-white: #FFFFFF;
  --webgazer-black: #000000;
  --webgazer-dark-gray: #1A1A1A;
  --webgazer-light-gray: #F5F5F5;
  
  /* RGB Values for Primary Colors */
  --webgazer-primary-blue-rgb: 58, 95, 235;
  --webgazer-dark-blue-rgb: 11, 69, 80;
  --webgazer-light-cream-rgb: 248, 247, 242;
  --webgazer-medium-gray-rgb: 137, 138, 142;
}

/* Color Classes for Easy Usage */
.webgazer-primary { color: var(--webgazer-primary-blue); }
.webgazer-dark-blue { color: var(--webgazer-dark-blue); }
.webgazer-cream { color: var(--webgazer-light-cream); }
.webgazer-gray { color: var(--webgazer-medium-gray); }

.webgazer-bg-primary { background-color: var(--webgazer-primary-blue); }
.webgazer-bg-dark-blue { background-color: var(--webgazer-dark-blue); }
.webgazer-bg-cream { background-color: var(--webgazer-light-cream); }
.webgazer-bg-gray { background-color: var(--webgazer-medium-gray); }

/* Border Colors */
.webgazer-border-primary { border-color: var(--webgazer-primary-blue); }
.webgazer-border-dark-blue { border-color: var(--webgazer-dark-blue); }

/* Gradient Backgrounds */
.webgazer-gradient-primary {
  background: linear-gradient(135deg, var(--webgazer-primary-blue) 0%, var(--webgazer-dark-blue) 100%);
}

.webgazer-gradient-subtle {
  background: linear-gradient(135deg, var(--webgazer-light-cream) 0%, var(--webgazer-white) 100%);
}

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

.webgazer-hover-dark:hover {
  background-color: var(--webgazer-dark-blue);
  color: var(--webgazer-white);
}