/* Variables CSS - Shared between website and app */
:root {
    /* Blue and Gold Color Palette */
    --primary-color: #31B4F2;      /* Turquoise */
    --secondary-color: #0000FF;    /* Blue */
    --accent-color: #F8CF40;       /* Gold */
    --tertiary-color: #025492;     /* Blue Grotto */
    --background-color: #FFFFFF;   /* Pure White */
    --text-color: #2C3E50;         /* Dark Blue-Gray */
    --light-text: #FFFFFF;         /* White text for dark backgrounds */
    --dark-gray: #34495E;          /* Darker gray for contrast */
    --light-gray: #ECF0F1;         /* Light gray for borders */
    
    /* Layout & Spacing */
    --container-width: 1200px;
    --border-radius: 12px;
    --box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    
    /* Status Colors */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
}

/* Status Background Colors with Transparency */
.bg-success {
    background-color: rgba(40, 167, 69, 0.1);
    color: #1e7e34;
}

.bg-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #d39e00;
}

.bg-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #bd2130;
}

.bg-info {
    background-color: rgba(23, 162, 184, 0.1);
    color: #117a8b;
}