/* ==============================
   BACKDROP FILTERS
   ============================== */

/* --- Blur --- */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

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

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

/* --- Brightness --- */
.backdrop-bright {
  backdrop-filter: brightness(1.2);
  -webkit-backdrop-filter: brightness(1.2);
}

.backdrop-dim {
  backdrop-filter: brightness(0.8);
  -webkit-backdrop-filter: brightness(0.8);
}

/* --- Contrast --- */
.backdrop-contrast {
  backdrop-filter: contrast(1.2);
  -webkit-backdrop-filter: contrast(1.2);
}

.backdrop-low-contrast {
  backdrop-filter: contrast(0.8);
  -webkit-backdrop-filter: contrast(0.8);
}

/* --- Grayscale --- */
.backdrop-grayscale {
  backdrop-filter: grayscale(1);
  -webkit-backdrop-filter: grayscale(1);
}

/* --- Opacità --- */
.backdrop-opacity-50 {
  backdrop-filter: opacity(0.5);
  -webkit-backdrop-filter: opacity(0.5);
}

/* --- Combinati --- */
.backdrop-glass {
  backdrop-filter: blur(12px) brightness(1.1) contrast(1.1);
  -webkit-backdrop-filter: blur(12px) brightness(1.1) contrast(1.1);
}

/* Transizioni generiche */
.backdrop-transition {
  transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
/* effects.css */

/* --- Blur --- */
.blur-sm {
  filter: blur(2px);
}
.blur-md {
  filter: blur(5px);
}
.blur-lg {
  filter: blur(10px);
}


/* ==============================
   BACKGROUND COLORS (RGBA)
   ============================== */

/* --- Black --- */
.bg-black-20 {
  background-color: var(--color-black-20);
}
.bg-black-40 {
  background-color: var(--color-black-40);
}
.bg-black-60 {
  background-color: var(--color-black-60);
}
.bg-black-80 {
  background-color: var(--color-black-80);
}
.bg-black-100 {
  background-color: var(--color-black-100);
}

/* --- Primary --- */
.bg-primary-20 {
  background-color: var(--color-primary-rgba-20);
}
.bg-primary-30 {
  background-color: var(--color-primary-rgba-30);
}

/* --- Secondary --- */
.bg-secondary-20 {
  background-color: var(--color-secondary-rgba-20);
}
.bg-secondary-30 {
  background-color: var(--color-secondary-rgba-30);
}

/* --- Third --- */
.bg-third-20 {
  background-color: var(--color-third-rgba-20);
}
.bg-third-30 {
  background-color: var(--color-third-rgba-30);
}

/* --- Accent 1 --- */
.bg-accent-1-20 {
  background-color: var(--color-accent-1-rgba-20);
}
.bg-accent-1-30 {
  background-color: var(--color-accent-1-rgba-30);
}

/* --- Accent 2 --- */
.bg-accent-2-20 {
  background-color: var(--color-accent-2-rgba-20);
}
.bg-accent-2-30 {
  background-color: var(--color-accent-2-rgba-30);
}

/* --- Accent 3 --- */
.bg-accent-3-20 {
  background-color: var(--color-accent-3-rgba-20);
}
.bg-accent-3-30 {
  background-color: var(--color-accent-3-rgba-30);
}


.shadow-cards{
  background: #fff;
  border: 1px solid var(--color-third-200);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Facoltativo: effetto hover più “pro” */
.shadow-cards:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  border-color: var(--color-third-500);
}