/* ============================================================
   PLAYGENIE THEME COLORS
   Blue (#4a90e2) and Orange (#ff8c42) brand color scheme
   
   This file provides:
   - CSS custom properties for brand colors
   - Color utility classes
   - Theme-aware component styling
   ============================================================ */

:root {
    /* Primary Colors */
    --pg-primary: #4a90e2;
    --pg-primary-dark: #357abd;
    --pg-primary-light: #6ba3e8;
    
    /* Accent Colors */
    --pg-accent: #ff8c42;
    --pg-accent-dark: #e67a35;
    --pg-accent-light: #ffa85c;
    
    /* Brand Colors */
    --pg-blue: #4a90e2;
    --pg-orange: #ff8c42;
    
    /* Gradients */
    --pg-gradient-primary: linear-gradient(135deg, #4a90e2 0%, #ff8c42 100%);
    --pg-gradient-blue: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    --pg-gradient-orange: linear-gradient(135deg, #ff8c42 0%, #e67a35 100%);
    --pg-gradient-background: linear-gradient(135deg, #2c5f8d 0%, #357abd 50%, #4a90e2 100%);
    
    /* Shadow Colors */
    --pg-shadow-blue: rgba(74, 144, 226, 0.4);
    --pg-shadow-blue-strong: rgba(74, 144, 226, 0.6);
    --pg-shadow-orange: rgba(255, 140, 66, 0.4);
}

/* Apply theme to common elements */
.btn-primary,
.play-button:not(.disabled),
.cta-button {
    background: var(--pg-gradient-primary) !important;
    box-shadow: 0 4px 15px var(--pg-shadow-blue) !important;
}

.btn-primary:hover,
.play-button:not(.disabled):hover,
.cta-button:hover {
    box-shadow: 0 6px 20px var(--pg-shadow-blue-strong) !important;
}

/* Theme inputs and focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--pg-primary) !important;
    outline: 2px solid var(--pg-shadow-blue) !important;
}

/* Theme links and highlights */
a:hover,
.nav-link:hover,
.link-primary {
    color: var(--pg-primary) !important;
}

.text-accent {
    color: var(--pg-accent) !important;
}

/* Apply gradient backgrounds */
.bg-gradient-primary {
    background: var(--pg-gradient-primary) !important;
}

.bg-gradient-blue {
    background: var(--pg-gradient-blue) !important;
}

.bg-gradient-orange {
    background: var(--pg-gradient-orange) !important;
}

.bg-primary {
    background: var(--pg-primary) !important;
}

.bg-accent {
    background: var(--pg-accent) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--pg-primary) !important;
}

.border-accent {
    border-color: var(--pg-accent) !important;
}