/* =========================================
   WHITE LABEL THEME BRANDING (HEX BASED)
========================================= */

/* =========================================
   DEFAULT THEME (Purple)
========================================= */
:root{
  --brand:#7c3aed;
  --brand-rgb:124,58,237;

  /* BRAND SHADES */
  --brand-50:#f5f3ff;
  --brand-100:#ede9fe;
  --brand-200:#ddd6fe;
  --brand-300:#c4b5fd;
  --brand-400:#a78bfa;
  --brand-500:#8b5cf6;
  --brand-600:#7c3aed;
  --brand-700:#6d28d9;
  --brand-800:#5b21b6;
  --brand-900:#4c1d95;

  /* ACCENT & SUCCESS */
  --accent-400:#FFD76F;
  --success-400:#B4FFB0;

  /* LOGIN GRADIENT */
  --login-gradient-start: rgba(var(--brand-rgb),0.85);
  --login-gradient-end: rgba(var(--brand-rgb),0.65);
}

/* =========================================
   BACKGROUND UTILITIES
========================================= */
.bg-purple-50{background:var(--brand-50)!important;}
.bg-purple-100{background:var(--brand-100)!important;}
.bg-purple-200{background:var(--brand-200)!important;}
.bg-purple-300{background:var(--brand-300)!important;}
.bg-purple-400{background:var(--brand-400)!important;}
.bg-purple-500{background:var(--brand-500)!important;}
.bg-purple-600{background:var(--brand-600)!important;}
.bg-purple-700{background:var(--brand-600)!important;}

/* =========================================
   TEXT UTILITIES
========================================= */
.text-purple-50{color:var(--brand-50)!important;}
.text-purple-100{color:var(--brand-100)!important;}
.text-purple-200{color:var(--brand-200)!important;}
.text-purple-300{color:var(--brand-300)!important;}
.text-purple-400{color:var(--brand-400)!important;}
.text-purple-500{color:var(--brand-500)!important;}
.text-purple-600{color:var(--brand-600)!important;}
.text-purple-700{color:var(--brand-700)!important;}
.text-purple-800{color:var(--brand-800)!important;}
.text-purple-900{color:var(--brand-900)!important;}

.text-brand{color:var(--brand-600)!important;}
.text-brand-dark{color:var(--brand-800)!important;}

/* =========================================
   BORDER UTILITIES
========================================= */
.border-purple-100{border-color:var(--brand-100)!important;}
.border-purple-200{border-color:var(--brand-200)!important;}
.border-purple-300{border-color:var(--brand-300)!important;}
.border-purple-400{border-color:var(--brand-400)!important;}
.border-purple-500{border-color:var(--brand-500)!important;}
.border-purple-600{border-color:var(--brand-600)!important;}

/* =========================================
   HOVER STATES
========================================= */
.hover\:bg-purple-50:hover{background:var(--brand-50)!important;}
.hover\:bg-purple-100:hover{background:var(--brand-100)!important;}
.hover\:bg-purple-200:hover{background:var(--brand-200)!important;}
.hover\:bg-purple-600:hover{background:var(--brand-600)!important;}
.hover\:bg-purple-700:hover{background:var(--brand-700)!important;}

.hover\:text-purple-500:hover{color:var(--brand-500)!important;}
.hover\:text-purple-600:hover{color:var(--brand-600)!important;}
.hover\:text-purple-700:hover{color:var(--brand-700)!important;}

.hover\:border-purple-200:hover{border-color:var(--brand-200)!important;}
.hover\:border-purple-300:hover{border-color:var(--brand-300)!important;}
.hover\:border-purple-400:hover{border-color:var(--brand-400)!important;}
.hover\:border-purple-500:hover{border-color:var(--brand-500)!important;}
.hover\:border-purple-600:hover{border-color:var(--brand-600)!important;}

/* =========================================
   GROUP HOVER
========================================= */
.group:hover .group-hover\:text-purple-100{color:var(--brand-100)!important;}
.group:hover .group-hover\:text-purple-200{color:var(--brand-200)!important;}
.group:hover .group-hover\:text-purple-300{color:var(--brand-300)!important;}
.group:hover .group-hover\:text-purple-400{color:var(--brand-400)!important;}
.group:hover .group-hover\:text-purple-500{color:var(--brand-500)!important;}
.group:hover .group-hover\:text-purple-600{color:var(--brand-600)!important;}
.group:hover .group-hover\:text-purple-700{color:var(--brand-700)!important;}

/* =========================================
   FOCUS STATES
========================================= */
.focus\:border-purple-100:focus{border-color:var(--brand-100)!important;}
.focus\:border-purple-200:focus{border-color:var(--brand-200)!important;}
.focus\:border-purple-400:focus{border-color:var(--brand-300)!important;}
.focus\:border-purple-500:focus{border-color:var(--brand-500)!important;}
.focus\:border-purple-600:focus{border-color:var(--brand-600)!important;}
.focus\:border-purple-700:focus{border-color:var(--brand-700)!important;}
.focus\:ring-purple-300:focus{  box-shadow:0 0 0 3px var(--brand-300)!important;}
.focus\:ring-purple-500:focus{box-shadow:0 0 0 3px var(--brand-300)!important;}
/* LABEL */
input:focus ~ label{ color:var(--brand-600)!important;}
/* =========================================
   GRADIENT UTILITIES
========================================= */
.from-purple-100{--tw-gradient-from:var(--brand-100)!important;}
.from-purple-500{--tw-gradient-from:var(--brand-200)!important;}
.from-purple-600{--tw-gradient-from:var(--brand-600)!important;}
.from-purple-700{--tw-gradient-from:var(--brand-700)!important;}
.from-purple-800{--tw-gradient-from:var(--brand-800)!important;}
.via-purple-100{--tw-gradient-stops: var(--tw-gradient-from), var(--brand-100), var(--tw-gradient-to)!important;}

.to-purple-50{--tw-gradient-to:var(--brand-50)!important;}
.to-purple-200{--tw-gradient-to:var(--brand-200)!important;}
.to-purple-500{--tw-gradient-to:var(--brand-500)!important;}
.to-indigo-500{--tw-gradient-to:var(--brand-500)!important;}
.to-purple-600{--tw-gradient-to:var(--brand-400)!important;}
.to-blue-600{--tw-gradient-to:var(--brand-600)!important;}
to-pink-500{--tw-gradient-to:var(--brand-500)!important;}
/* =========================================
   BRAND CUSTOM UTILITIES
========================================= */
.group:focus-within .group-focus-within\:text-brand-500 {color: var(--brand-500) !important;}
.group:focus-within .group-focus-within\:text-brand-600 {color: var(--brand-600) !important;}
.group:focus-within .group-focus-within\:text-brand-700 {color: var(--brand-700) !important;} 

.text-brand-100{color:var(--brand-100)!important;}
.text-brand-300{color:var(--brand-300)!important;}
.text-brand-500{color:var(--brand-500)!important;}
.text-brand-700{color:var(--brand-700)!important;}

.bg-brand-50{background:var(--brand-50)!important;}
.bg-brand-100{background:var(--brand-100)!important;}
.bg-brand-500{background:var(--brand-500)!important;}
.bg-brand-600{background:var(--brand-600)!important;}

.border-brand-200{border-color:var(--brand-200)!important;}
.border-brand-300{border-color:var(--brand-300)!important;}
.border-brand-700{border-color:var(--brand-700)!important;}

.hover\:bg-brand-700:hover{background:var(--brand-700)!important;}
.hover\:text-brand-700:hover{color:var(--brand-700)!important;}
.hover\:border-brand-700:hover{border-color:var(--brand-700)!important;}

.group:hover .group-hover\:text-brand-700{color:var(--brand-700)!important;}
/* =========================================
   ACCENT & SUCCESS
========================================= */
.text-accent-400{color:var(--accent-400)!important;}
.text-success-400{color:var(--success-400)!important;}

.bg-success-50{background:#ecfdf5!important;}
.border-success-200{border-color:#a7f3d0!important;}
.text-success-600{color:#059669!important;}
/* =========================================
   LOGIN BACKGROUND
========================================= */
.login-bg{
  background-image: linear-gradient(108deg,var(--login-gradient-start),var(--login-gradient-end)), url('/resources/images/signupback.webp');
  background-size:cover;
  background-position:center;
}
/* =========================================
   BRAND GRADIENT FROM-VIA-TO
========================================= */
.from-brand-100{
  --tw-gradient-from: var(--brand-100) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-200{
  --tw-gradient-from: var(--brand-200) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-300{
  --tw-gradient-from: var(--brand-300) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-400{
  --tw-gradient-from: var(--brand-400) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-500{
  --tw-gradient-from: var(--brand-500) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-600{
  --tw-gradient-from: var(--brand-600) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand-700{
  --tw-gradient-from: var(--brand-700) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-brand { --tw-gradient-from: var(--brand-600) !important;}

.via-brand { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-500), var(--tw-gradient-to) !important;}
.via-brand-200{--tw-gradient-stops:  var(--tw-gradient-from), var(--brand-200), var(--tw-gradient-to) !important;}
.via-brand-300{ --tw-gradient-stops:var(--tw-gradient-from),var(--brand-300), var(--tw-gradient-to) !important;}
.via-brand-400{ --tw-gradient-stops: var(--tw-gradient-from), var(--brand-400),var(--tw-gradient-to) !important;}
.via-brand-500{ --tw-gradient-stops: var(--tw-gradient-from), var(--brand-500), var(--tw-gradient-to) !important;}
.via-brand-600{ --tw-gradient-stops: var(--tw-gradient-from), var(--brand-600),var(--tw-gradient-to) !important;}

.to-brand-200{ --tw-gradient-to: var(--brand-200) !important; }
.to-brand-300{ --tw-gradient-to: var(--brand-300) !important; }
.to-brand-400{ --tw-gradient-to: var(--brand-400) !important; }
.to-brand-500{ --tw-gradient-to: var(--brand-500) !important; }
.to-brand-600{ --tw-gradient-to: var(--brand-600) !important; }
.to-brand-700{ --tw-gradient-to: var(--brand-700) !important; }
.to-brand-accent { --tw-gradient-to: var(--brand-accent) !important;}


.text-brand-700-80 {
  color: rgba(var(--brand-rgb), 0.8) !important;
}

.bg-brand-50-50 {
  background: rgba(var(--brand-rgb), 0.05) !important;
}