/* ───── Header Gradient ───── */
.bg-header {
    background: linear-gradient(180deg, #FFFFFF -12.26%, #4F749A 110%);
  }
  
  /* ───── Primary (white) ───── */
  .text-primary {
    color: #FFFFFF;
  }
  .bg-primary {
    background-color: #FFFFFF;
  }
  /* Hover/Focus */
  .hover\:text-primary:hover,
  .focus\:text-primary:focus {
    color: #FFFFFF;
  }

  .text-gradient-primary {
    color: linear-gradient(180deg, #FFFFFF -12.26%, #4F749A 110%);
  }
  .hover\:bg-primary:hover,
  .focus\:bg-primary:focus {
    background-color: #FFFFFF;
  }
  /* Borders */
  .border-primary {
    border-color: #FFFFFF;
  }
  /* Opacity variants */
  .bg-primary\/10 { background-color: rgba(255,255,255,0.1); }
  .bg-primary\/20 { background-color: rgba(255,255,255,0.2); }
  .bg-primary\/30 { background-color: rgba(255,255,255,0.3); }
  .bg-primary\/40 { background-color: rgba(255,255,255,0.4); }
  .bg-primary\/50 { background-color: rgba(255,255,255,0.5); }
  .bg-primary\/60 { background-color: rgba(255,255,255,0.6); }
  .bg-primary\/70 { background-color: rgba(255,255,255,0.7); }
  .bg-primary\/80 { background-color: rgba(255,255,255,0.8); }
  .bg-primary\/90 { background-color: rgba(255,255,255,0.9); }
  
  /* ───── Secondary (»¨ÃÛÖ±²¥app-blue) ───── */
  .text-secondary {
    color: #4F749A;
  }
  .bg-secondary {
    background-color: #4F749A;
  }
  /* Hover/Focus */
  .hover\:text-secondary:hover,
  .focus\:text-secondary:focus {
    color: #4F749A;
  }
  .hover\:bg-secondary:hover,
  .focus\:bg-secondary:focus {
    background-color: #4F749A;
  }
  /* Borders */
  .border-secondary {
    border-color: #4F749A;
  }
  /* Opacity variants */
  .bg-secondary\/10 { background-color: rgba(79,116,154,0.1); }
  .bg-secondary\/20 { background-color: rgba(79,116,154,0.2); }
  .bg-secondary\/30 { background-color: rgba(79,116,154,0.3); }
  .bg-secondary\/40 { background-color: rgba(79,116,154,0.4); }
  .bg-secondary\/50 { background-color: rgba(79,116,154,0.5); }
  .bg-secondary\/60 { background-color: rgba(79,116,154,0.6); }
  .bg-secondary\/70 { background-color: rgba(79,116,154,0.7); }
  .bg-secondary\/80 { background-color: rgba(79,116,154,0.8); }
  .bg-secondary\/90 { background-color: rgba(79,116,154,0.9); }
  
  /* ───── Tertiary (logo-red) ───── */
  .text-tertiary {
    color: #E21B24;
  }
  .bg-tertiary {
    background-color: #E21B24;
  }
  /* Hover/Focus */
  .hover\:text-tertiary:hover,
  .focus\:text-tertiary:focus {
    color: #E21B24;
  }
  .hover\:bg-tertiary:hover,
  .focus\:bg-tertiary:focus {
    background-color: #E21B24;
  }
  /* Borders */
  .border-tertiary {
    border-color: #E21B24;
  }
  /* Opacity variants */
  .bg-tertiary\/10 { background-color: rgba(226,27,36,0.1); }
  .bg-tertiary\/20 { background-color: rgba(226,27,36,0.2); }
  .bg-tertiary\/30 { background-color: rgba(226,27,36,0.3); }
  .bg-tertiary\/40 { background-color: rgba(226,27,36,0.4); }
  .bg-tertiary\/50 { background-color: rgba(226,27,36,0.5); }
  .bg-tertiary\/60 { background-color: rgba(226,27,36,0.6); }
  .bg-tertiary\/70 { background-color: rgba(226,27,36,0.7); }
  .bg-tertiary\/80 { background-color: rgba(226,27,36,0.8); }
  .bg-tertiary\/90 { background-color: rgba(226,27,36,0.9); }
  
  /* ───── Gradients ───── */
  /* use for backgrounds elsewhere if needed */
  .bg-gradient-primary {
    background: linear-gradient(180deg, #FFFFFF -12.26%, #4F749A 110%);
  }
  .bg-gradient-secondary {
    background: linear-gradient(135deg, #4F749A, #E21B24);
  }