/* ============================================
   COLOR SYSTEM - UAE ANALYTICAL MATRIX
   Adapted from Dive Club design for UAE theme
   ============================================ */

:root {
    /* Primary Colors - Deep Blue (from design) */
    --color-primary-dark: #0a1929;      /* Deep ocean blue - main background */
    --color-primary: #1a2f4a;           /* Medium blue - cards, sections */
    --color-primary-light: #2a4a6e;     /* Lighter blue - hover states */
    
    /* UAE Accent Colors - Gold & Sand */
    --color-gold: #d4af37;              /* UAE gold - luxury, premium */
    --color-gold-light: #f4d03f;        /* Light gold - highlights */
    --color-sand: #c9a961;              /* Desert sand - warmth */
    --color-sand-light: #e8d5b7;        /* Light sand - subtle backgrounds */
    
    /* Secondary Colors - Modern Dubai */
    --color-teal: #26a69a;              /* Modern teal - tech, innovation */
    --color-teal-light: #4db6ac;         /* Light teal - accents */
    --color-coral: #ff6b6b;             /* Coral accent (from design) */
    --color-purple: #7b68ee;            /* Purple accent (from design) */
    
    /* Neutral Colors */
    --color-white: #ffffff;              /* Pure white - text, highlights */
    --color-gray-light: #f5f5f5;        /* Light gray - subtle backgrounds */
    --color-gray: #9e9e9e;               /* Medium gray - secondary text */
    --color-gray-dark: #424242;          /* Dark gray - borders */
    
    /* Text Colors */
    --color-text-primary: #ffffff;       /* White text on dark */
    --color-text-secondary: #b0bec5;    /* Light gray text */
    --color-text-accent: #d4af37;        /* Gold text for emphasis */
    
    /* Background Gradients */
    --gradient-primary: linear-gradient(135deg, #0a1929 0%, #1a2f4a 50%, #2a4a6e 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    --gradient-sunset: linear-gradient(135deg, #ff6b6b 0%, #d4af37 50%, #26a69a 100%);
    --gradient-night: linear-gradient(135deg, #0a1929 0%, #1a2f4a 50%, #7b68ee 100%);
    
    /* Shadow Colors */
    --shadow-primary: rgba(10, 25, 41, 0.3);
    --shadow-gold: rgba(212, 175, 55, 0.2);
    --shadow-glow: rgba(212, 175, 55, 0.4);
}

/* Color Usage Classes */
.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-gold {
    background-color: var(--color-gold);
}

.text-gold {
    color: var(--color-gold);
}

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

.text-secondary {
    color: var(--color-text-secondary);
}

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

.bg-gradient-gold {
    background: var(--gradient-gold);
}

.bg-gradient-sunset {
    background: var(--gradient-sunset);
}

.bg-gradient-night {
    background: var(--gradient-night);
}

/* Card Styles */
.card {
    background-color: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-gold);
    box-shadow: 0 10px 30px var(--shadow-gold);
}

/* Accent Elements */
.accent-gold {
    color: var(--color-gold);
}

.accent-teal {
    color: var(--color-teal);
}

.accent-coral {
    color: var(--color-coral);
}

/* Border Accents */
.border-gold {
    border-color: var(--color-gold);
}

.border-teal {
    border-color: var(--color-teal);
}