/*
Theme Name: RapidSpares
Theme URI: https://rapidspares.com.au/
Author: Raj Puchhdiya
Author URI: https://gatetouch.com/
Description: Premium automotive spare parts theme with WooCommerce compatibility and light/dark mode support.
Version: 1.21.0
Text Domain: rapidspares
*/



:root {
    /* Core Brand Colors */
    --red: #E31837;
    --red-dark: #B71530;
    --red-hover: #FF1E3D;
    --yellow: #FFD100;
    
    /* Default (Light) Theme Variables */
    --bg-body: #EEE;
    --bg-site: #F8F9FA;
    --bg-nav: #1C1C1C;
    --bg-deep: #111;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    
    --text-main: #1A1A1A;
    --text-muted: #888;
    --text-dim: #AAA;
    --text-white: #FFF;
    
    --border-light: #EEE;
    --border-glass: rgba(255, 255, 255, 0.1);
    
    --transition: all 0.2s ease;
    --shadow: 0 2px 8px rgba(0,0,0,0.15);
    --primary-glow: rgba(227, 24, 55, 0.4);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --bg-body: #0a0a0a;
    --bg-site: #111111;
    --bg-nav: #000000;
    --bg-deep: #050505;
    --bg-card: #1c1c1c;
    --bg-input: #2a2a2a;
    
    --text-main: #EEEEEE;
    --text-muted: #AAAAAA;
    --text-dim: #888888;
    
    --border-light: #333;
    --shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Customizations for WP Integration */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.site-wrapper {
    background: var(--bg-site);
}

.catalog-item, .cat-item, .trust-card, .featured-card {
    background: var(--bg-card);
    color: var(--text-main);
}

.featured-card {
    background: var(--bg-deep); /* Keep featured cards dark for aesthetic as per design */
    color: #FFF;
}

.section-title {
    color: var(--text-main);
}

.search-bar input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-light);
}

/* Theme Toggle Button Styles */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

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

.dark-icon { display: none; }
[data-theme="dark"] .light-icon { display: none; }
[data-theme="dark"] .dark-icon { display: block; }