/* ======================================
   ESRRMS TAILWIND CUSTOM UTILITIES
   Bright Gradient Theme Compatible
====================================== */

/*
Tailwind is loaded via CDN.

This file provides:

✔ Gradient utilities
✔ Bright theme tokens
✔ Custom UI helpers
✔ Production-ready overrides
*/

/* ======================================
   GLOBAL THEME TOKENS
====================================== */

:root {

/* Primary Gradients */

--gradient-primary:
linear-gradient(135deg, #2563eb, #06b6d4);

--gradient-secondary:
linear-gradient(135deg, #7c3aed, #ec4899);

/* Emergency Colors */

--primary-red: #ef4444;
--primary-blue: #2563eb;

--success-green: #10b981;
--warning-yellow: #f59e0b;

/* Bright Backgrounds */

--bg-main: #f1f5f9;
--bg-card: #ffffff;

/* Borders */

--border-light: #e2e8f0;

/* Text */

--text-dark: #1e293b;
--text-light: #64748b;

}

/* ======================================
   GRADIENT UTILITIES
====================================== */

.bg-primary-gradient {

background: var(--gradient-primary);

color: white;

}

.bg-secondary-gradient {

background: var(--gradient-secondary);

color: white;

}

.text-primary-gradient {

background: var(--gradient-primary);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

/* ======================================
   GLASS (LIGHT VERSION)
====================================== */

.glass {

background: rgba(255,255,255,0.7);

backdrop-filter: blur(10px);

border: 1px solid var(--border-light);

}

/* ======================================
   CARD UTILITIES
====================================== */

.card-hover:hover {

transform: translateY(-5px);

transition: 0.3s;

}

.card-shadow {

box-shadow:
0 10px 25px rgba(0,0,0,0.05);

}

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

.status-success {

background: var(--success-green);

color: white;

}

.status-warning {

background: var(--warning-yellow);

color: white;

}

.status-danger {

background: var(--primary-red);

color: white;

}

/* ======================================
   BUTTON UTILITIES
====================================== */

.btn-gradient {

background: var(--gradient-primary);

color: white;

border-radius: 10px;

padding: 10px 20px;

font-weight: 600;

transition: 0.3s;

}

.btn-gradient:hover {

transform: scale(1.05);

}

/* ======================================
   BADGE UTILITIES
====================================== */

.badge-soft {

background: #e0f2fe;

color: #0369a1;

padding: 4px 10px;

border-radius: 6px;

font-size: 12px;

}

/* ======================================
   ALERT FLASH UTILITY
====================================== */

@keyframes alertFlash {

0% {
background-color: transparent;
}

50% {
background-color: rgba(239,68,68,0.2);
}

100% {
background-color: transparent;
}

}

.alert-flash {

animation: alertFlash 1s infinite;

}

/* ======================================
   FUTURE:
   Tailwind compiled output goes here
====================================== */