/* ============================================
   COLOR SYSTEM - UAE ENTERTAINMENT SPACES
   Based on design reference + UAE/Dubai theme
   ============================================ */

:root {
    /* Primary Colors - Dark & Elegant */
    --color-primary-dark: #1a1a1a;        /* Deep dark for typography */
    --color-primary-dark-soft: #2c2c2c;   /* Softer dark variant */
    --color-primary-dark-light: #3d3d3d;  /* Lighter dark for backgrounds */
    
    /* Accent Colors - Luxury & Warmth */
    --color-accent-gold: #d4af37;         /* Dubai gold - luxury */
    --color-accent-gold-light: #e8c547;   /* Light gold */
    --color-accent-gold-dark: #b8941f;    /* Dark gold */
    --color-accent-orange: #d4a574;       /* Warm orange-brown from design */
    --color-accent-orange-light: #e8b88a; /* Light orange */
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-white-soft: #fafafa;          /* Soft white for backgrounds */
    --color-grey-light: #e8e8e8;          /* Light grey */
    --color-grey-medium: #999999;         /* Medium grey */
    --color-grey-dark: #666666;           /* Dark grey */
    
    /* Blue Colors - Sky & Sea (UAE theme) */
    --color-blue-turquoise: #4a90a4;      /* Turquoise from design */
    --color-blue-dubai: #0099cc;          /* Dubai sky blue */
    --color-blue-deep: #006699;           /* Deep blue */
    --color-blue-light: #5ba8c4;         /* Light turquoise */
    
    /* Brown Colors - Earth & Architecture */
    --color-brown-dark: #3d2817;          /* Dark brown from design */
    --color-brown-medium: #5a3d2a;        /* Medium brown */
    --color-brown-light: #8b6f47;         /* Light brown */
    
    /* Background Colors */
    --color-bg-primary: #0a0a0a;          /* Main background (dark) */
    --color-bg-secondary: #1a1a1a;        /* Secondary background */
    --color-bg-tertiary: #2c2c2c;        /* Tertiary background */
    --color-bg-light: #f5f5f5;            /* Light background */
    --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Overlay dark */
    --color-bg-overlay-light: rgba(0, 0, 0, 0.4); /* Light overlay */
    
    /* Text Colors */
    --color-text-primary: #ffffff;        /* Primary text (white) */
    --color-text-secondary: #cccccc;      /* Secondary text */
    --color-text-tertiary: #999999;       /* Tertiary text */
    --color-text-dark: #1a1a1a;           /* Dark text for light backgrounds */
    --color-text-accent: #d4af37;         /* Accent text (gold) */
    
    /* Interactive Colors */
    --color-link: #4a90a4;                /* Link color (turquoise) */
    --color-link-hover: #5ba8c4;          /* Link hover */
    --color-button-primary: #d4af37;      /* Primary button (gold) */
    --color-button-primary-hover: #e8c547; /* Primary button hover */
    --color-button-secondary: #4a90a4;    /* Secondary button (turquoise) */
    --color-button-secondary-hover: #5ba8c4; /* Secondary button hover */
    --color-button-dark: #3d2817;         /* Dark button */
    --color-button-dark-hover: #5a3d2a;   /* Dark button hover */
    
    /* Border Colors */
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    --color-border-dark: rgba(0, 0, 0, 0.2);
    --color-border-accent: #d4af37;
    
    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.3);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    --color-shadow-gold: rgba(212, 175, 55, 0.3);
    --color-shadow-blue: rgba(74, 144, 164, 0.3);
    
    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #e8c547 100%);
    --gradient-blue: linear-gradient(135deg, #4a90a4 0%, #5ba8c4 100%);
    --gradient-warm: linear-gradient(135deg, #d4a574 0%, #e8b88a 100%);
    --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    
    /* Status Colors */
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #ff9800;
    --color-info: #2196f3;
}

/* ============================================
   COLOR UTILITY CLASSES
   ============================================ */

.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-light { background-color: var(--color-bg-light); }
.bg-gold { background-color: var(--color-accent-gold); }
.bg-blue { background-color: var(--color-blue-turquoise); }
.bg-brown { background-color: var(--color-brown-dark); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-dark { color: var(--color-text-dark); }
.text-gold { color: var(--color-accent-gold); }
.text-blue { color: var(--color-blue-turquoise); }

.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-accent { border-color: var(--color-border-accent); }

.gradient-gold { background: var(--gradient-gold); }
.gradient-blue { background: var(--gradient-blue); }
.gradient-warm { background: var(--gradient-warm); }
.gradient-dark { background: var(--gradient-dark); }
.gradient-overlay { background: var(--gradient-overlay); }