/* BUSS Theme System - CSS Custom Properties */
/* This file defines the theme color variables that can be dynamically updated */

:root {
    /* Primary Color - Used for main branding elements */
    --primary-color: #1E3A8A;  /* Default: Blue-900 */
    --primary-hover: #1e40af;  /* Slightly lighter for hover states */
    --primary-light: #3b82f6;  /* Light variant */
    --primary-dark: #1e3a8a;   /* Dark variant */
    
    /* Accent Color - Used for highlights and CTAs */
    --accent-color: #D4A525;   /* Default: Gold */
    --accent-hover: #b8941f;   /* Slightly darker for hover states */
    --accent-light: #fbbf24;   /* Light variant */
    --accent-dark: #92400e;    /* Dark variant */
    
    /* Derived colors for consistency */
    --primary-rgb: 30, 58, 138;  /* RGB values for transparency */
    --accent-rgb: 212, 165, 37;  /* RGB values for transparency */
}

/* Utility classes for theme colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-hover:hover {
    background-color: var(--primary-hover) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.bg-accent-hover:hover {
    background-color: var(--accent-hover) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.border-accent {
    border-color: var(--accent-color) !important;
}

/* Override Tailwind's blue-900 with theme primary */
.bg-blue-900 {
    background-color: var(--primary-color) !important;
}

.text-blue-900 {
    color: var(--primary-color) !important;
}

.border-blue-900 {
    border-color: var(--primary-color) !important;
}

/* Override various blue shades */
.bg-blue-800 {
    background-color: var(--primary-color) !important;
}

.text-blue-800 {
    color: var(--primary-color) !important;
}

.bg-blue-600 {
    background-color: var(--primary-light) !important;
}

.text-blue-600 {
    color: var(--primary-light) !important;
}

/* Override Tailwind's yellow-400 with theme accent */
.bg-yellow-400 {
    background-color: var(--accent-color) !important;
}

.text-yellow-400 {
    color: var(--accent-color) !important;
}

.border-yellow-400 {
    border-color: var(--accent-color) !important;
}

.hover\:text-yellow-400:hover {
    color: var(--accent-color) !important;
}

.hover\:bg-yellow-300:hover {
    background-color: var(--accent-hover) !important;
}

/* Gradient overrides */
.from-blue-900 {
    --tw-gradient-from: var(--primary-color) !important;
}

.to-blue-800 {
    --tw-gradient-to: var(--primary-color) !important;
}

/* Button primary override */
.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

/* Button secondary (accent) override */
.btn-secondary {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

.btn-secondary:hover {
    background-color: var(--accent-hover) !important;
}
