/* assets/css/spu-colors.css */
:root {
    /* Primary Colors from SPU Theme */
    --spu-primary: #008B8B;
    --spu-primary-dark: #280b72;
    --spu-primary-light: #3182CE;
    
    /* Secondary/Accent Colors */
    --spu-accent: #c4bf00;  /* Gold/Yellow accent */
    --spu-accent-dark: #a34a08;
    --spu-accent-light: #f7fa7c;
    
    /* Neutral Colors */
    --spu-white: #ffffff;
    --spu-light-gray: #f7f9fb;
    --spu-medium-gray: #718096;
    --spu-dark-gray: #2D3748;
    --spu-black: #1A202C;
    
    /* Status Colors */
    --spu-success: #018e11;
    --spu-warning: #FFB236;
    --spu-danger: #ff5062;
    --spu-info: #2CA8FF;
}

/* Typography */
body {
    font-family: 'Work Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Itim', cursive;
    color: var(--spu-primary);
}

/* Button Styles */
.btn-spu-primary {
    background-color: var(--spu-primary);
    border-color: var(--spu-primary);
    color: var(--spu-white);
}

.btn-spu-primary:hover {
    background-color: var(--spu-primary-dark);
    border-color: var(--spu-white);
}

.btn-spu-accent {
    background-color: var(--spu-accent);
    border-color: var(--spu-accent);
    color: var(--spu-black);
}

.btn-spu-accent:hover {
    background-color: var(--spu-accent-dark);
    border-color: var(--spu-accent-dark);
}

/* Card Styles */
.spu-card {
    border-top: 3px solid var(--spu-primary);
    border-right: 3px solid var(--spu-primary);
    border-bottom: 3px solid var(--spu-primary);
    border-left: 3px solid var(--spu-primary);
    border-radius: 5px;
    transition: all 0.3s ease;
}



/* Alert Styles */
.alert-spu {
    border-left: 4px solid var(--spu-primary);
    background-color: var(--spu-light-gray);
}

/* Table Styles */
.table-spu th {
    background-color: var(--spu-primary);
    color: var(--spu-white);
}

.table-spu tbody tr:hover {
    background-color: var(--spu-light-gray);
}

/* Button Styles */
.btn-spu-primary {
    background-color: var(--spu-primary);
    border-color: var(--spu-primary);
    color: var(--spu-white);
    transition: all 0.3s ease;
}

.btn-spu-primary:hover,
.btn-spu-primary:focus {
    background-color: var(--spu-primary-dark);
    border-color: var(--spu-primary-dark);
    color: var(--spu-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 24, 127, 0.3);
}

.btn-spu-accent {
    background-color: var(--spu-accent-dark);
    border-color: var(--spu-accent-dark);
    color: var(--spu-white);
    
    transition: all 0.3s ease;
}

.btn-spu-accent:hover,
.btn-spu-accent:focus {
    background-color: var(--spu-accent);
    
    border-color: var(--spu-accent);
    color: var(--spu-black);
    transform: translateY(-2px);
}

.btn-outline-spu-primary {
    background-color: transparent;
    border-color: var(--spu-primary);
    color: var(--spu-primary);
    transition: all 0.3s ease;
}

.btn-outline-spu-primary:hover,
.btn-outline-spu-primary:focus {
    background-color: var(--spu-primary);
    border-color: var(--spu-primary);
    color: var(--spu-white);
    transform: translateY(-2px);
}

/* Badge Styles */
.badge-spu {
    background-color: var(--spu-accent);
    color: var(--spu-black);
    font-weight: 500;
}

.badge-spu-primary {
    background-color: var(--spu-primary);
    color: var(--spu-white);
}