:root {
    --primary-color: #0E0E0E;
    --secondary-color: #111111;
    --accent-color: #AB2524;
    --accent-hover: #c22a2a;
    --light-color: #FFFFFF;
    --gray-color: #888888;
    --dark-gray: #222222;
    --text-color: #FFFFFF;
    --text-muted: rgba(255, 255, 255, 0.7);
    --gradient-fire: linear-gradient(135deg, #C41E1E, #FF4A4A);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.4);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    /* Performance optimized transitions */
    --transition-fast: all 0.2s ease;
    --transition-medium: all 0.3s ease;
    --transition-slow: all 0.5s ease;

    /* Z-index management */
    --z-header: 1000;
    --z-modal: 1100;
    --z-tooltip: 1200;
    --z-cursor: 9999;

    /* Container sizes */
    --container-max-width: 1400px;
    --container-padding: 40px;
    --container-padding-mobile: 20px;
}

/* CSS Custom Properties for better performance */
@supports (color: color(display-p3 1 0 0)) {
    :root {
        --accent-color: #AB2524;
        --accent-hover: #c22a2a;
    }
}