/* 
 * colors.css
 * Contains all color variables and theming for the Climbing Giants website
 * Using a Retro Futurism color scheme with synthwave aesthetics
 */

:root {
    /* Primary Colors */
    --primary-color: #7B2CBF;       /* Synthwave purple */
    --secondary-color: #00FFFF;     /* Cyan */
    --accent-color: #FF1493;        /* Hot pink */
    
    /* Background Colors */
    --dark-bg: #120458;             /* Deep blue */
    --darker-bg: #0a0129;           /* Darker blue for footer/gradients */
    --body-bg: #070024;             /* Base background color */
    
    /* Text Colors */
    --light-text: #f8f9fa;          /* Very light gray/off-white for dark backgrounds */
    --muted-text: #b0b0b0;          /* Medium light gray for less emphasis */
    
    /* Effect Colors (for shadows, gradients, glows) */
    --glow-primary: rgba(123, 44, 191, 0.5);    /* Purple glow */
    --glow-secondary: rgba(0, 255, 255, 0.5);   /* Cyan glow */
    --glow-accent: rgba(255, 20, 147, 0.5);     /* Pink glow */
    
    /* Gradient Definitions */
    --gradient-hero: linear-gradient(135deg, var(--dark-bg) 0%, var(--primary-color) 100%);
    --gradient-featured: linear-gradient(to right, rgba(18, 4, 88, 0.7), rgba(123, 44, 191, 0.7));
    --gradient-footer: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
    
    /* Component-Specific Colors */
    --navbar-bg: rgba(18, 4, 88, 0.9);
    --card-bg: rgba(18, 4, 88, 0.6);
    --btn-hover: #f012a3;           /* Slightly darker pink for button hover */
    
    /* Border Colors */
    --border-light: rgba(0, 255, 255, 0.3);    /* Cyan border - more subtle */
    --border-medium: rgba(0, 255, 255, 0.5);   /* Cyan border - more visible */
}

/* 
 * Helper classes for applying colors directly in HTML
 * Usage example: <span class="text-accent">Important text</span>
 */

/* Text colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-light { color: var(--light-text); }
.text-muted { color: var(--muted-text); }

/* Background colors */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-dark { background-color: var(--dark-bg); }
.bg-darker { background-color: var(--darker-bg); }

/* Gradient backgrounds */
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-featured { background: var(--gradient-featured); }
.bg-gradient-footer { background: var(--gradient-footer); }

/* Glow text effects */
.glow-primary { text-shadow: 0 0 10px var(--glow-primary); }
.glow-secondary { text-shadow: 0 0 10px var(--glow-secondary); }
.glow-accent { text-shadow: 0 0 10px var(--glow-accent); }