/* =========================
   COLORS
========================= */

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

.bg-white {
  background: var(--color-white);
}

.bg-black {
  background: var(--color-black);
}

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

.bg-primary {
  background: var(--color-primary);
}

.bg-primary-soft {
  background: var(--color-primary-soft);
}

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

.bg-primary-dark {
  background: var(--color-primary-dark);
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-secondary-soft {
  background: var(--color-secondary-soft);
}

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

.bg-secondary-dark {
  background: var(--color-secondary-dark);
}

.bg-cta {
  background: var(--color-cta);
}

.bg-overlay {
  background: var(--color-overlay);
}


.text-black {
  color: var(--color-black);
}

.text-white {
  color: var(--color-white);
}

.text-gray-500 {
  color: var(--color-gray-500);
}

.text-primary {
  color: var(--color-primary);
}

.text-primary-dark {
  color: var(--color-primary-dark);
}

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

.text-cta {
  color: var(--color-cta);
}


/* Text on colored backgrounds
 ========================= */

.text-on-primary {
  color: var(--color-on-primary);
}

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

.text-on-cta {
  color: var(--color-on-cta);
}

/* =========================
   BORDER
========================= */
.border{border:1px solid #e5e5e5;}

.border-t{border-top:1px solid #e5e5e5;}

.border-b{border-bottom:1px solid #e5e5e5;}

.ring {border:1px solid var(--color-primary);}

.ring-2 {
  box-shadow: 0 0 0 2px var(--ring-color, #606060);
}

.ring-primary {
  --ring-color: var(--color-primary);
}

.ring-secondary {
  --ring-color: var(--color-secondary);
}

.ring-cta {
  --ring-color: var(--color-cta);
}

.rounded-sm{border-radius:var(--radius-sm);}
.rounded-md{border-radius:var(--radius-md);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-full{border-radius:var(--radius-full);}

/* =========================
   SHADOWS
========================= */
.shadow-sm{box-shadow:var(--shadow-sm);}
.shadow-md{box-shadow:var(--shadow-md);}
.shadow-lg{box-shadow:var(--shadow-lg);}
.shadow-hover:hover{box-shadow: var(--shadow-smd);}


/* =========================
   BLUR SYSTEM (IMPORTANT ADDITION)
========================= */
.blur-sm{
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

.blur-md{
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}

.blur-lg{
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
}

/* GLASS EFFECT */
.glass {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
}

/* =========================
   VENDOR
========================= */

.vendor-header {
  background: var(--theme-background);
  color: var(--theme-color);
}

.vendor-footer {
  background: var(--theme-background);
  color: var(--theme-color);
}