/**
 * HyzenPro Global Color System
 * 
 * Color palette derived from the landing page design
 * Dark theme with high contrast accents
 * 
 * @package HyzenPro
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables - Colors
   ========================================================================== */

:root {
    /* Primary Colors */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Gray Scale */
    --color-gray-900: #0a0a0a;
    /* Dark background */
    --color-gray-800: #1a1a1a;
    /* Cards, secondary bg */
    --color-gray-700: #2a2a2a;
    /* Borders */
    --color-gray-600: #3a3a3a;
    /* Muted elements */
    --color-gray-500: #666666;
    /* Secondary text */
    --color-gray-400: #888888;
    /* Placeholder text */
    --color-gray-300: #cccccc;
    /* Light text on dark */
    --color-gray-200: #e5e5e5;
    /* Borders on light */
    --color-gray-100: #f5f5f5;
    /* Light backgrounds */
    --color-gray-50: #fafafa;
    /* Subtle backgrounds */

    /* Accent Colors */
    --color-orange: #ff6b35;
    --color-blue: #4a90e2;
    --color-green: #4caf50;
    --color-red: #ff6b6b;
    --color-yellow: #ffa500;
    /* Star ratings */

    /* Semantic Colors */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    --gradient-radial-soft: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);

    /* Alpha Variations */
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-95: rgba(0, 0, 0, 0.95);

    /* Component-specific Colors */
    --nav-bg: rgba(0, 0, 0, 0.8);
    --nav-bg-scrolled: rgba(0, 0, 0, 0.95);
    --card-bg-dark: var(--color-gray-800);
    --card-bg-light: var(--color-white);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-light-hover: rgba(255, 255, 255, 0.1);
    --border-dark: var(--color-gray-200);

    /* Shadow Colors */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Dark Theme (Default for Landing Page)
   ========================================================================== */

.theme-dark,
.section-dark {
    --bg-primary: var(--color-black);
    --bg-secondary: var(--color-gray-900);
    --bg-tertiary: var(--color-gray-800);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-gray-300);
    --text-muted: var(--color-gray-400);
    --border-color: var(--border-light);

    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ==========================================================================
   Light Theme (For specific sections)
   ========================================================================== */

.theme-light,
.section-light {
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-100);
    --bg-tertiary: var(--color-gray-50);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-gray-800);
    --text-muted: var(--color-gray-500);
    --border-color: var(--border-dark);

    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ==========================================================================
   Color Utility Classes
   ========================================================================== */

/* Background Colors */
.bg-black {
    background-color: var(--color-black) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-gray-900 {
    background-color: var(--color-gray-900) !important;
}

.bg-gray-800 {
    background-color: var(--color-gray-800) !important;
}

.bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

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

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

.bg-green {
    background-color: var(--color-green) !important;
}

/* Text Colors */
.text-black {
    color: var(--color-black) !important;
}

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

.text-gray-300 {
    color: var(--color-gray-300) !important;
}

.text-gray-500 {
    color: var(--color-gray-500) !important;
}

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

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

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

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

/* Border Colors */
.border-white {
    border-color: var(--color-white) !important;
}

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

.border-gray {
    border-color: var(--color-gray-200) !important;
}

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

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

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

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

/* ==========================================================================
   Component Color Schemes
   ========================================================================== */

/* Pricing Badges */
.badge-freemium {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.badge-free {
    background-color: var(--color-green);
    color: var(--color-white);
}

.badge-paid {
    background-color: var(--color-gray-600);
    color: var(--color-white);
}

/* Star Ratings */
.stars {
    color: var(--color-yellow);
}

/* Favorite Button */
.favorite-active {
    color: var(--color-red);
}

/* ==========================================================================
   Backdrop Filter Support
   ========================================================================== */

@supports (backdrop-filter: blur(20px)) {
    .backdrop-blur {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

@supports not (backdrop-filter: blur(20px)) {
    .backdrop-blur {
        background-color: var(--color-black-95);
    }
}