/* Orange & Black Theme Color Variables */
:root {
    /* Primary Orange Colors */
    --theme-color: #FF6B35;
    --theme-color-rgb: 255, 107, 53;
    --theme-color-light: #FF8A5C;
    --theme-color-dark: #E55A2B;
    --theme-color-darker: #CC4D1F;
    
    /* Secondary Orange Shades */
    --secondary-orange: #FF8C42;
    --accent-orange: #FFA366;
    --light-orange: #FFE5D9;
    --pale-orange: #FFF4F0;
    
    /* Black & Gray Colors */
    --primary-color: #1A1A1A;
    --secondary-color: #2D2D2D;
    --dark-bg: #0F0F0F;
    --charcoal: #333333;
    --light-gray: #F5F5F5;
    --medium-gray: #CCCCCC;
    
    /* Text Colors */
    --heading-color: #1A1A1A;
    --body-color: #666666;
    --text-light: #999999;
    --text-white: #FFFFFF;
    
    /* Status Colors */
    --success-color: #27AE60;
    --warning-color: #F39C12;
    --danger-color: #E74C3C;
    --info-color: #3498DB;
    
    /* Background Colors */
    --bg-light: #FAFAFA;
    --bg-white: #FFFFFF;
    --bg-dark: #1A1A1A;
    --bg-overlay: rgba(26, 26, 26, 0.8);
    
    /* Border Colors */
    --border-color: #E9ECEF;
    --border-light: #F8F9FA;
    --border-dark: #333333;
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.25);
    --shadow-orange: rgba(255, 107, 53, 0.2);
    
    /* Gradient Colors */
    --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(255, 107, 53, 0.1) 100%);
    
    /* Rating Color */
    --rating-color: #FFB800;
    
    /* Additional Theme Colors */
    --grey-bg: #F8F9FA;
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Roboto', sans-serif;
}

/* Dark Theme Overrides */
.dark-theme {
    --bg-light: #1A1A1A;
    --bg-white: #2D2D2D;
    --heading-color: #FFFFFF;
    --body-color: #CCCCCC;
    --text-light: #999999;
    --border-color: #333333;
    --border-light: #2D2D2D;
}

/* Orange Theme Utilities */
.text-orange { color: var(--theme-color) !important; }
.bg-orange { background-color: var(--theme-color) !important; }
.border-orange { border-color: var(--theme-color) !important; }

.text-dark { color: var(--primary-color) !important; }
.bg-dark { background-color: var(--primary-color) !important; }
.border-dark { border-color: var(--primary-color) !important; }

/* Hover Effects */
.hover-orange:hover { color: var(--theme-color) !important; }
.hover-bg-orange:hover { background-color: var(--theme-color) !important; }
.hover-dark:hover { color: var(--primary-color) !important; }
.hover-bg-dark:hover { background-color: var(--primary-color) !important; }

/* Button Styles */
.btn-orange {
    background: var(--gradient-orange);
    color: var(--text-white);
    border: none;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background: var(--theme-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow-orange);
}

.btn-dark {
    background: var(--gradient-dark);
    color: var(--text-white);
    border: none;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background: var(--charcoal);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow-dark);
}