/* colors.css */

/* Color palette variables and brand/accent utilities */

:root {
  --color-primary: #2b4eff;
  --color-primary-transparent: #2b4eff94;
  --color-primary-light: #4facfe;
  --color-primary-dark: #001f8a;
  --color-scrolled-header: #160d4f;
  --color-secondary: #68a4c4;
  --color-success: #6ace85;
  --color-warning: #ffc107;
  --color-danger: #ff687c;
  --color-info: #3fcdc7;
  --color-light: #f9faff;
  --color-dark: #222222;
  --color-penguin-box: #517ce8;


/* Button gradient */
  --color-start: #4facfe;
  --color-middle: #00f2fe;
  --color-end: #4facfe;

  /* Gradient as a variable */
  --gradient-bg: linear-gradient(to right, var(--color-start) 0%, var(--color-middle) 50%, var(--color-end) 100%);


--color-start-soft1: #6ea8fe; /* softer blue */
--color-middle-soft1: #8ddfff; /* light cyan */
--color-end-soft1: #6ea8fe;

--gradient-bg-soft1: linear-gradient(to right, var(--color-start-soft1) 0%, var(--color-middle-soft1) 50%, var(--color-end-soft1) 100%);

--color-start-soft2: #5a7dce; /* muted medium blue */
--color-middle-soft2: #89bde5; /* pastel sky blue */
--color-end-soft2: #5a7dce;

--gradient-bg-soft2: linear-gradient(to right, var(--color-start-soft2) 0%, var(--color-middle-soft2) 50%, var(--color-end-soft2) 100%);

--color-start-soft3: #4a6fa9; /* slate blue */
--color-middle-soft3: #7a9ccf; /* soft cornflower blue */
--color-end-soft3: #4a6fa9;

--gradient-bg-soft3: linear-gradient(to right, var(--color-start-soft3) 0%, var(--color-middle-soft3) 50%, var(--color-end-soft3) 100%);

--color-start-navy-vibrant1: #223a75; /* deep royal blue */
--color-middle-navy-vibrant1: #4a6fc1; /* vibrant slate blue */
--color-end-navy-vibrant1: #223a75;

--gradient-bg-navy-vibrant1: linear-gradient(to right, var(--color-start-navy-vibrant1) 0%, var(--color-middle-navy-vibrant1) 50%, var(--color-end-navy-vibrant1) 100%);


--color-start-navy-vibrant3: #1e3a7a; /* strong navy */
--color-middle-navy-vibrant3: #3f67bb; /* mid-tone blue */
--color-end-navy-vibrant3: #1e3a7a;

--gradient-bg-navy-vibrant3: linear-gradient(to right, var(--color-start-navy-vibrant3) 0%, var(--color-middle-navy-vibrant3) 50%, var(--color-end-navy-vibrant3) 100%);

--color-start-navy-vibrant1b: #223a75;  /* deep royal blue */
--color-middle-navy-vibrant1b: #517ce8; /* more vibrant bright blue */
--color-end-navy-vibrant1b: #223a75;

--gradient-bg-navy-vibrant1b: linear-gradient(to right, var(--color-start-navy-vibrant1b) 0%, var(--color-middle-navy-vibrant1b) 50%, var(--color-end-navy-vibrant1b) 100%);

--color-start-navy-vibrant3b: #1e3a7a;  /* strong navy */
--color-middle-navy-vibrant3b: #5b82e6; /* brighter mid-tone blue */
--color-end-navy-vibrant3b: #1e3a7a;

--gradient-bg-navy-vibrant3b: linear-gradient(to right, var(--color-start-navy-vibrant3b) 0%, var(--color-middle-navy-vibrant3b) 50%, var(--color-end-navy-vibrant3b) 100%);
}


  /* Grayscale */
  --gray-100: #f8f9fa;
  --gray-200: #e6e6e6;
  --gray-300: #ced4da;
  --gray-400: #adb5bd;
  --gray-500: #6c757d;
  --gray-600: #495057;
  --gray-700: #343a40;
  --gray-800: #212529;
  --gray-900: #121416;
}

/* Background utility classes */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
}

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

/* Text colors */
.text-primary {
  color: var(--color-primary) !important;
}

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

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

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

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

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  color: white;
  outline: none;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
}