/**
 * Jake Loves Space - Global Color Definitions
 * 
 * This is the SINGLE SOURCE OF TRUTH for all colors.
 * Import this file in all HTML pages and use CSS variables.
 * 
 * Usage in CSS:  color: var(--primary-purple);
 * Usage in JS:   getComputedStyle(document.documentElement).getPropertyValue('--primary-purple')
 */

:root {
    /* ===========================================
       PRIMARY BRAND COLOR - Purple
       RGB: 132, 86, 246
       =========================================== */
    --primary-purple: #8856F6;
    --primary-purple-dark: #6B3ED9;
    --primary-purple-light: #A77FF8;
    
    /* Purple with transparency */
    --primary-purple-10: rgba(132, 86, 246, 0.1);
    --primary-purple-15: rgba(132, 86, 246, 0.15);
    --primary-purple-20: rgba(132, 86, 246, 0.2);
    --primary-purple-30: rgba(132, 86, 246, 0.3);
    --primary-purple-50: rgba(132, 86, 246, 0.5);
    --primary-purple-60: rgba(132, 86, 246, 0.6);
    --primary-purple-80: rgba(132, 86, 246, 0.8);
    
    /* ===========================================
       GRADIENTS
       =========================================== */
    --gradient-primary: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    
    /* ===========================================
       SEMANTIC COLORS (using the primary purple)
       =========================================== */
    --color-accent: var(--primary-purple);
    --color-link: var(--primary-purple);
    --color-focus: var(--primary-purple);
    --color-border-accent: var(--primary-purple);
    --color-glow: var(--primary-purple-50);
    
    /* ===========================================
       UI COLORS
       =========================================== */
    --color-bg-dark: #0a0a0a;
    --color-bg-black: #000000;
    --color-text-white: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    
    /* ===========================================
       STATUS COLORS
       =========================================== */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-gold: #ffd700;
    
    /* ===========================================
       COOKIE CONSENT OVERRIDES
       =========================================== */
    --cc-btn-primary-bg: var(--gradient-primary);
    --cc-btn-primary-hover-bg: var(--primary-purple-dark);
    --cc-toggle-bg-on: var(--primary-purple);
}