/* CSS Variables - Modern Automotive Theme */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');
:root {
    /* Primary Colors - Electric & Dynamic */
    --color-primary: #00d4ff;        /* Electric Cyan */
    --color-primary-dark: #0a0e27;   /* Deep Space Blue */
    --color-primary-light: #00f5ff;  /* Bright Cyan */
    --color-accent: #ff0080;         /* Neon Pink */
    --color-accent-secondary: #7b2cbf; /* Purple */

    /* Gradients - Futuristic */
    --gradient-primary: linear-gradient(135deg, #030637 0%, #3C0753 100%);
    --gradient-accent: linear-gradient(135deg, #720455 0%, #910A67 100%);
    --gradient-electric: linear-gradient(135deg, #1B3C53 0%, #234C6A 100%);
    --gradient-neon: linear-gradient(135deg, #456882 0%, #D2C1B6 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(10, 14, 39, 0.45) 0%, rgba(10, 14, 39, 0.55) 100%);

    /* Background Colors */
    --color-bg-light: #37353E;
    --color-bg-white: #44444E;
    --color-bg-dark: #715A5A;
    --color-bg-darker: #05070f;
    --color-bg-card: #D3DAD9;
    --color-bg-card-dark: rgba(10, 14, 39, 0.9);

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #ffffff;
    --color-text-muted: #adb5bd;
    --color-text-white: #ffffff;
    --color-text-light: #e9ecef;
    --color-text-black: #000;

    /* Border Colors */
    --color-border-light: rgba(0, 212, 255, 0.1);
    --color-border-medium: rgba(0, 212, 255, 0.3);
    --color-border-strong: rgba(0, 212, 255, 0.6);

    /* State Colors */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* Shadow Colors - Glowing Effects */
    --shadow-glow-primary: 0 0 20px rgba(0, 212, 255, 0.3);
    --shadow-glow-accent: 0 0 20px rgba(255, 0, 128, 0.3);
    --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 30px 80px rgba(0, 212, 255, 0.2);
    --shadow-button: 0 4px 15px rgba(0, 212, 255, 0.4);

    /* Hover Effects */
    --color-hover-primary: #00f5ff;
    --color-hover-bg: rgba(0, 212, 255, 0.1);

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Border Radius - Modern & Smooth */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    /* --font-primary: 'Orbitron', sans-serif; */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: "Inter", "Roboto", sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}