/**
 * SP Petro Brand Colors - Custom CSS Variables
 * Based on the SP Petro flame logo
 * 
 * Primary: Red/Orange flame colors
 * Secondary: Industrial greys and whites
 */

:root {
    /* === PRIMARY BRAND COLORS === */
    --sp-red: #FF3A2E;              /* Main SP Red - Primary flame color */
    --sp-orange: #FF7A1A;           /* SP Orange - Secondary flame tone */
    --sp-deep-orange: #FF5A1F;      /* Deep Orange - Buttons, highlights, CTAs */
    
    /* Legacy theme-color variable (now points to SP Red) */
    --theme-color: #FF3A2E;
    --theme-color2: #FF7A1A;
    
    /* === SECONDARY/SUPPORT COLORS === */
    --sp-white: #FFFFFF;            /* Clean backgrounds */
    --sp-dark-grey: #222222;        /* Headings, primary text */
    --sp-light-grey: #F5F5F5;       /* Section backgrounds */
    --sp-medium-grey: #666666;      /* Secondary text */
    
    /* === TEXT COLORS === */
    --title-color: #222222;         /* Main headings */
    --body-color: #666666;          /* Body text */
    
    /* === BACKGROUND COLORS === */
    --smoke-color: #F5F5F5;         /* Light section backgrounds */
    --white-color: #FFFFFF;
    
    /* === BUTTON & CTA COLORS === */
    --btn-primary: #FF3A2E;         /* Primary button background */
    --btn-primary-hover: #FF5A1F;   /* Primary button hover */
    --btn-secondary: #FF7A1A;       /* Secondary button */
    
    /* === GRADIENT COMBINATIONS === */
    --gradient-primary: linear-gradient(135deg, #FF3A2E 0%, #FF7A1A 100%);
    --gradient-secondary: linear-gradient(135deg, #FF5A1F 0%, #FF7A1A 100%);
    --gradient-overlay: linear-gradient(45deg, transparent 0%, rgba(255,58,46,0.1) 25%, rgba(255,255,255,0.1) 50%, rgba(255,58,46,0.1) 75%, transparent 100%);
    
    /* === SHADOW & EFFECTS === */
    --shadow-primary: 0 8px 25px rgba(255, 58, 46, 0.3);
    --shadow-hover: 0 10px 30px rgba(255, 58, 46, 0.4);
    --shadow-light: 0 4px 15px rgba(255, 58, 46, 0.15);
    
    /* === ACCENT COLORS === */
    --accent-color: #FF7A1A;        /* Icons, highlights */
    --border-color: #FF3A2E;        /* Borders, dividers */
    
    /* === STATE COLORS === */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #FF7A1A;
}

/* === DARK MODE SUPPORT (Optional) === */
@media (prefers-color-scheme: dark) {
    :root {
        --sp-white: #1a1a1a;
        --sp-light-grey: #2a2a2a;
        --sp-dark-grey: #e0e0e0;
        --title-color: #ffffff;
        --body-color: #cccccc;
    }
}

/* === BUTTON STYLES === */
.th-btn,
.btn-primary {
    background: var(--sp-red) !important;
    border-color: var(--sp-red) !important;
    color: var(--sp-white) !important;
    transition: all 0.3s ease;
}

.th-btn:hover,
.btn-primary:hover {
    background: var(--sp-deep-orange) !important;
    border-color: var(--sp-deep-orange) !important;
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* === LINK COLORS === */
a {
    color: var(--sp-red);
}

a:hover {
    color: var(--sp-orange);
}

/* === HEADING ACCENT === */
.sub-title,
.section-subtitle {
    color: var(--sp-red) !important;
}

.double-line::before,
.double-line::after {
    background: var(--sp-orange) !important;
}

/* === ICON COLORS === */
.icon,
.box-icon i,
.feature-icon {
    color: var(--sp-orange) !important;
}

/* === CARD ACCENTS === */
.card-accent-border {
    border-left: 4px solid var(--sp-red) !important;
}

/* === GRADIENT BACKGROUNDS === */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

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

/* === PULSE ANIMATION === */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.pulse-dot {
    animation: pulse 2s infinite;
}

/* === SHADOW UTILITIES === */
.shadow-primary {
    box-shadow: var(--shadow-primary) !important;
}

.shadow-light {
    box-shadow: var(--shadow-light) !important;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 991px) {
    :root {
        --shadow-primary: 0 6px 20px rgba(255, 58, 46, 0.25);
        --shadow-hover: 0 8px 25px rgba(255, 58, 46, 0.35);
    }
}

@media (max-width: 767px) {
    :root {
        --shadow-primary: 0 4px 15px rgba(255, 58, 46, 0.2);
        --shadow-hover: 0 6px 20px rgba(255, 58, 46, 0.3);
    }
}

/* === FILTER MENU BUTTONS === */
.filter-menu .th-btn,
.filter-menu.style-2 .th-btn {
    background: var(--sp-red) !important;
    border-color: var(--sp-red) !important;
    color: var(--sp-white) !important;
}

.filter-menu .th-btn:before,
.filter-menu.style-2 .th-btn:before {
    background-color: var(--sp-deep-orange) !important;
}

.filter-menu .th-btn:hover,
.filter-menu.style-2 .th-btn:hover,
.filter-menu .th-btn.active,
.filter-menu.style-2 .th-btn.active {
    background: var(--sp-deep-orange) !important;
    border-color: var(--sp-deep-orange) !important;
    color: var(--sp-white) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-2px);
}

.filter-menu .th-btn:hover:before,
.filter-menu.style-2 .th-btn:hover:before,
.filter-menu .th-btn.active:before,
.filter-menu.style-2 .th-btn.active:before {
    background: var(--sp-orange) !important;
}