/* ============================================
   NSSF Gradient System – Primary & Extended
   ============================================ */

/* --- Base Gradient Container --- */
.gradient2 {
  --start: #18428F; /* fallback */
  --end:   #6CBE45; /* fallback */
  --angle: 135deg;
  --tint: 0;
  background: linear-gradient(var(--angle),
    var(--start) calc(100% * var(--tint)),
    var(--end)
  );
  position: relative;
}

/* --- Angle Helpers --- */
.g2-45  { --angle: 45deg; }
.g2-90  { --angle: 90deg; }
.g2-135 { --angle: 135deg; }
.g2-180 { --angle: 180deg; }

/* --- Tint Helpers (0–80%) --- */
.tint-0  { --tint: 0; }
.tint-5  { --tint: .05; }
.tint-10 { --tint: .10; }
.tint-15 { --tint: .15; }
.tint-20 { --tint: .20; }
.tint-25 { --tint: .25; }
.tint-30 { --tint: .30; }
.tint-35 { --tint: .35; }
.tint-40 { --tint: .40; }
.tint-45 { --tint: .45; }
.tint-50 { --tint: .50; }
.tint-55 { --tint: .55; }
.tint-60 { --tint: .60; }
.tint-65 { --tint: .65; }
.tint-70 { --tint: .70; }
.tint-75 { --tint: .75; }
.tint-80 { --tint: .80; }

/* ============================
   Gradient Palette
   ============================ */

/* --- Single Primaries --- */
.g2-blue   { --start: #18428F; --end: #0E1B2A; }   /* NSSF Blue → Dark */
.g2-green  { --start: #6CBE45; --end: #4cb748; }   /* NSSF Green → Dark */
.g2-rad-blue  { --start: #18428F; --end: #0E1B2A; background: radial-gradient(circle, var(--start), var(--end)); }
.g2-rad-green { --start: #6CBE45; --end: #0E1B2A; background: radial-gradient(circle, var(--start), var(--end)); }

/* --- Blue Pairings --- */
.g2-blue-green   { --start: #18428F; --end: #6CBE45; }
.g2-blue-orange  { --start: #18428F; --end: #F26524; }
.g2-blue-teal    { --start: #18428F; --end: #009596; }
.g2-blue-purple  { --start: #18428F; --end: #7A3CFF; }
.g2-blue-red     { --start: #18428F; --end: #E63946; }
.g2-blue-gold    { --start: #18428F; --end: #A3884F; }

/* --- Green Pairings --- */
.g2-green-orange { --start: #6CBE45; --end: #F26524; }
.g2-green-teal   { --start: #6CBE45; --end: #009596; }
.g2-green-purple { --start: #6CBE45; --end: #7A3CFF; }
.g2-green-red    { --start: #6CBE45; --end: #E63946; }
.g2-gold-green   { --start: #A3884F; --end: #6CBE45; }

/* --- Extended Mixes --- */
.g2-purple-teal  { --start: #7A3CFF; --end: #00E6A8; }
.g2-red-orange   { --start: #E63946; --end: #FF7F50; }
.g2-sunset       { --start: #F26524; --end: #EE0979; }

/* --- Gold / Accent --- */
.g2-gold         { --start: #A3884F; --end: #FFD27F; }
/* ===== Brand-safe pairs (no gold) ===== */

/* Core single tones */
.g2-blue   { --start: #18428F; --end: #0E1B2A; } /* NSSF Blue → Navy */
.g2-green  { --start: #6CBE45; --end: #003462; } /* NSSF Green → Navy */

/* Radials */
.g2-rad-blue  { --start: #18428F; --end: #0E1B2A; background: radial-gradient(circle, var(--start), var(--end)); }
.g2-rad-green { --start: #6CBE45; --end: #0E1B2A; background: radial-gradient(circle, var(--start), var(--end)); }

/* Blue pairings */
.g2-blue-green   { --start: #18428F; --end: #6CBE45; }
.g2-blue-teal    { --start: #18428F; --end: #009596; } /* Teal accent */
.g2-blue-purple  { --start: #18428F; --end: #7A3CFF; }
.g2-blue-red     { --start: #18428F; --end: #E63946; }
/* Replaces Blue→Gold: use Blue→Indigo for depth */
.g2-blue-indigo  { --start: #18428F; --end: #2E3192; }

/* Green pairings */
.g2-green-teal   { --start: #6CBE45; --end: #009596; }
.g2-green-purple { --start: #6CBE45; --end: #7A3CFF; }
.g2-green-red    { --start: #6CBE45; --end: #E63946; }
/* Replaces Gold→Green: use Green→Navy for subtle depth (already g2-green) */

/* Extended mixes (keep, brand-safe) */
.g2-purple-teal  { --start: #7A3CFF; --end: #00E6A8; }
.g2-red-orange   { --start: #E63946; --end: #FF7F50; }
.g2-sunset       { --start: #F26524; --end: #EE0979; }

/* Optional: aliases so older classes keep working */
.gr-publte { --start:#18428F; --end:#009596; --angle:135deg; background: linear-gradient(var(--angle), var(--start), var(--end)); }
.gr-sacr   { --start:#7A3CFF; --end:#00E6A8; --angle:135deg; background: linear-gradient(var(--angle), var(--start), var(--end)); }
.gr-busa   { --start:#00AEEF; --end:#2E3192; --angle:135deg; background: linear-gradient(var(--angle), var(--start), var(--end)); }
.gr-green  { --start:#6CBE45; --end:#0E1B2A; --angle:135deg; background: linear-gradient(var(--angle), var(--start), var(--end)); }
.gr-red    { --start:#E63946; --end:#FF7F50; --angle:135deg; background: linear-gradient(var(--angle), var(--start), var(--end)); }
/* === Restored Signature Gradient === */
/* === Signature Gradient: Primary Blue → Dark Purple === */
/* === Signature Gradient: Dark Purple → Primary Blue === */
.g2-purple-blue {
  background: linear-gradient(135deg, #4B0082 50%, #005FBA 100%);
}

/* Angle helpers */
.g2-purple-blue.gr-90  { background: linear-gradient(90deg,  #4B0082 0%, #005FBA 100%); }
.g2-purple-blue.gr-45  { background: linear-gradient(45deg,  #4B0082 0%, #005FBA 100%); }
.g2-purple-blue.gr-180 { background: linear-gradient(180deg, #4B0082 0%, #005FBA 100%); }

/* Tint system (0–80) */
.g2-purple-blue.tint-0  { background: linear-gradient(135deg, rgba(75,0,130,1)   0%, rgba(0,95,186,1)   100%); }
.g2-purple-blue.tint-20 { background: linear-gradient(135deg, rgba(75,0,130,0.8) 0%, rgba(0,95,186,0.8) 100%); }
.g2-purple-blue.tint-40 { background: linear-gradient(135deg, rgba(75,0,130,0.6) 0%, rgba(0,95,186,0.6) 100%); }
.g2-purple-blue.tint-60 { background: linear-gradient(135deg, rgba(75,0,130,0.4) 0%, rgba(0,95,186,0.4) 100%); }
/* === Primary Blue → Dark Purple === */