/* Theme Custom CSS for School Tak 02 */

:root {
    --brand-pink: #FF4081;
    --brand-yellow: #FFC107;
    --brand-blue: #00BCD4;
    --brand-green: #4CAF50;
    --brand-purple: #9C27B0;
    --brand-orange: #FF5722;
}

/* Fallback colors for pure CSS contexts */
.text-brandPink { color: var(--brand-pink); }
.bg-brandPink { background-color: var(--brand-pink); }
.border-brandPink { border-color: var(--brand-pink); }

.text-brandYellow { color: var(--brand-yellow); }
.bg-brandYellow { background-color: var(--brand-yellow); }
.border-brandYellow { border-color: var(--brand-yellow); }

.text-brandBlue { color: var(--brand-blue); }
.bg-brandBlue { background-color: var(--brand-blue); }
.border-brandBlue { border-color: var(--brand-blue); }

.text-brandGreen { color: var(--brand-green); }
.bg-brandGreen { background-color: var(--brand-green); }
.border-brandGreen { border-color: var(--brand-green); }

.text-brandPurple { color: var(--brand-purple); }
.bg-brandPurple { background-color: var(--brand-purple); }
.border-brandPurple { border-color: var(--brand-purple); }

.text-brandOrange { color: var(--brand-orange); }
.bg-brandOrange { background-color: var(--brand-orange); }
.border-brandOrange { border-color: var(--brand-orange); }

/* Animation helpers */
@keyframes marquee-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.school-badge-pulse {
    animation: marquee-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #FF4081;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e0356f;
}