/* ---------------- GREEN CARD ---------------- */

.from-green-50 {
  --tw-gradient-from: #f0fdf4;
  --tw-gradient-to: rgb(240 253 244 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-emerald-100 {
  --tw-gradient-to: #d1fae5;
}

.border-green-200 { border-color: #bbf7d0; }
.bg-emerald-500 { background-color: #10b981; }
.text-emerald-800 { color: #065f46; }
.text-emerald-700 { color: #047857; }


/* ---------------- YELLOW / AMBER CARD ---------------- */

.from-yellow-50 {
  --tw-gradient-from: #fefce8;
  --tw-gradient-to: rgb(254 252 232 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-100 {
  --tw-gradient-to: #fef3c7;
}

.border-yellow-200 { border-color: #fde68a; }
.bg-amber-500 { background-color: #f59e0b; }
.text-amber-800 { color: #92400e; }
.text-amber-700 { color: #b45309; }


/* ---------------- BLUE CARD ---------------- */

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-to: rgb(239 246 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-cyan-100 {
  --tw-gradient-to: #cffafe;
}

.border-blue-200 { border-color: #bfdbfe; }
.bg-cyan-500 { background-color: #06b6d4; }
.text-cyan-800 { color: #155e75; }
.text-cyan-700 { color: #0e7490; }


/* ---------------- COMMON UTILITIES ---------------- */

.p-4 { padding: 1rem; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.flex { display: flex; }
.items-center { align-items: center; }
.mb-2 { margin-bottom: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }
/* Base card style */
.metric-card {
  padding: 24px;
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}
.bg-red-50 {
  background-color: #fef2f2;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

.bg-red-300 {
  background-color: #fca5a5;
}

.bg-green-300 {
  background-color: rgb(134 239 172);
}

/* FROM COLOR */
.from-emerald-50 {
  --tw-gradient-from: #ecfdf5;
  --tw-gradient-to: rgb(236 253 245 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* TO COLOR */
.to-green-100 {
  --tw-gradient-to: #dcfce7;
}

.border-emerald-200 {
  border-color: #a7f3d0;
}

.from-purple-50 {
  --tw-gradient-from: #faf5ff;
  --tw-gradient-to: rgb(250 245 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff;
  --tw-gradient-stops: var(--tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

.from-purple-600 {
  --tw-gradient-from: #9333ea;
  --tw-gradient-to: rgb(147 51 234 / 0);
  --tw-gradient-stops: var(--tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

.to-indigo-700 {
  --tw-gradient-to: #4338ca;
  --tw-gradient-stops: var(--tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}

/* Individual gradients */
.gradient-pe {
  background: linear-gradient(to right, #06b6d4, #2563eb);
}

.gradient-pb {
  background: linear-gradient(to right, #22c55e, #16a34a);
}

.gradient-eps {
  background: linear-gradient(to right, #a855f7, #4f46e5);
}

.gradient-div {
  background: linear-gradient(to right, #f59e0b, #ea580c);
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.red-gradient-strong {
  --tw-gradient-position: to right;
  background-image: linear-gradient(var(--tw-gradient-position), #f87171, #dc2626);
  color: white;
}

.green-gradient-strong {
  --tw-gradient-position: to right;
  background-image: linear-gradient(var(--tw-gradient-position), #4ade80, #16a34a);
  color: white;
}

.light-blue-gradient {
  --tw-gradient-position: to right;
  background-image: linear-gradient(var(--tw-gradient-position), #7dd3fc, #3b82f6);
  color: white;
}

/* White → Gray Gradient */
.bg-white-gray-gradient {
  background-image: linear-gradient(to right, #ffffff, #f9fafb);
}