/* Soft Professional Blue Theme - Gentle & Attenuated Colors */
:root {
    /* Soft Professional Color Palette - Reduced Saturation 40-50% */
    --executive-navy: #2c3e50;             /* Softer navy foundation */
    --soft-professional-blue: #5288c4;    /* Much lighter than #1565c0 - primary soft blue */
    --gentle-trust-blue: #4a7ba7;         /* Softer than #0d47a1 - gentle trust */
    --muted-accent-red: #b85555;           /* Much softer than #c62828 - muted red */
    --soft-executive-white: #fafbfc;      /* Clean background maintained */
    
    /* Soft Professional Design System */
    --background: #fafbfc !important;                   /* Soft executive white background */
    --foreground: #2c3e50 !important;                  /* Soft executive navy for text */
    --card: #ffffff !important;                         /* Pure white cards */
    --card-foreground: #2c3e50 !important;             /* Soft executive navy text */
    --card-hover: #f8f9fa !important;                  /* Very light hover */
    
    --primary: #5288c4 !important;                     /* Soft professional blue primary */
    --primary-foreground: #ffffff !important;          /* White text on primary */
    --secondary: #4a7ba7 !important;                   /* Gentle trust blue secondary */
    --secondary-foreground: #ffffff !important;        /* White text on secondary */
    
    --accent: #b85555 !important;                      /* Muted accent red for attention */
    --accent-foreground: #ffffff !important;           /* White text on accent */
    
    --muted: #f5f6f7 !important;                       /* Light gray muted */
    --muted-foreground: #2c3e50 !important;            /* Soft executive navy muted text */
    
    --border: #e8f2ff !important;                      /* Very light blue border */
    --input: #ffffff !important;                       /* White input background */
    --ring: #5288c4 !important;                        /* Soft professional blue focus ring */
    
    /* Soft Professional Gradients - Gentle & Muted */
    --navbar-bg: linear-gradient(135deg, #2c3e50, #4a7ba7) !important;               /* Soft navy to gentle trust blue */
    --hero-gradient: linear-gradient(180deg, #fafbfc, #ffffff) !important;           /* Soft executive white to pure white */
    --button-gradient: linear-gradient(90deg, #5288c4, #4a7ba7) !important;          /* Soft professional blue to gentle trust blue */
    --red-gradient: linear-gradient(90deg, #b85555, #c67b7b) !important;             /* Muted red accent gradient */
    
    /* Typography - Professional and trustworthy */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-serif: 'Merriweather', Georgia, serif !important;
    --font-mono: 'JetBrains Mono', monospace !important;
    
    /* Professional rounded corners */
    --radius: 8px !important;
    --radius-sm: 4px !important;
    --radius-md: 6px !important;
    --radius-lg: 12px !important;
    --radius-xl: 16px !important;
    
    /* Soft professional shadows with reduced opacity - Gentle blue shadows */
    --shadow-2xs: 0 1px 3px 0px rgba(82, 136, 196, 0.03) !important;
    --shadow-xs: 0 2px 6px 0px rgba(82, 136, 196, 0.04) !important;
    --shadow-sm: 0 3px 10px 0px rgba(82, 136, 196, 0.05), 0 1px 2px 0px rgba(82, 136, 196, 0.02) !important;
    --shadow: 0 4px 16px 0px rgba(82, 136, 196, 0.06), 0 2px 4px 0px rgba(82, 136, 196, 0.03) !important;
    --shadow-md: 0 6px 20px 0px rgba(82, 136, 196, 0.08), 0 3px 6px 0px rgba(82, 136, 196, 0.04) !important;
    --shadow-lg: 0 8px 28px 0px rgba(82, 136, 196, 0.10), 0 4px 8px 0px rgba(82, 136, 196, 0.05) !important;
    --shadow-xl: 0 12px 36px 0px rgba(82, 136, 196, 0.12), 0 6px 12px 0px rgba(82, 136, 196, 0.06) !important;
    --shadow-2xl: 0 16px 48px 0px rgba(82, 136, 196, 0.16) !important;
    
    /* Conservative spacing */
    --spacing: 0.375rem !important;
    --tracking-normal: -0.01em !important;
}

/* Soft Professional Custom Styles */
body {
    font-family: var(--font-sans) !important;
    background: var(--background) !important;
    color: var(--foreground) !important;
    letter-spacing: var(--tracking-normal) !important;
    line-height: 1.6 !important;
}

/* Professional card styling with soft blue accents */
.professional-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.professional-card::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    background: var(--button-gradient) !important;
    border-radius: var(--radius) !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.professional-card:hover {
    background: var(--card-hover) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
    border-color: transparent !important;
}

.professional-card:hover::before {
    opacity: 1 !important;
}

/* Soft professional blue buttons */
.professional-btn-primary {
    background: var(--button-gradient) !important;
    color: var(--primary-foreground) !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 600 !important;
}

.professional-btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--red-gradient) !important;
    transition: left 0.3s ease !important;
}

.professional-btn-primary:hover::before {
    left: 0 !important;
}

.professional-btn-primary:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.professional-btn-primary span {
    position: relative !important;
    z-index: 1 !important;
}

.professional-btn-secondary {
    background: var(--card) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: var(--radius-lg) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    position: relative !important;
    overflow: hidden !important;
}

.professional-btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background: var(--primary) !important;
    transition: width 0.3s ease !important;
    z-index: 0 !important;
}

.professional-btn-secondary:hover {
    color: var(--primary-foreground) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px) !important;
}

.professional-btn-secondary:hover::before {
    width: 100% !important;
}

.professional-btn-secondary span {
    position: relative !important;
    z-index: 1 !important;
}

/* Muted red accent button for urgent actions */
.professional-btn-urgent {
    background: var(--red-gradient) !important;
    color: var(--accent-foreground) !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
}

.professional-btn-urgent:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
}

/* Professional navbar with soft gradient */
.professional-navbar {
    background: var(--navbar-bg) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Hero section with soft professional styling */
.professional-hero {
    background: var(--hero-gradient) !important;
    border-radius: var(--radius-xl) !important;
    padding: 4rem 2rem !important;
    margin-bottom: 4rem !important;
    border: 1px solid var(--border) !important;
    position: relative !important;
    overflow: hidden !important;
}

.professional-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(82, 136, 196, 0.03) 0%, transparent 50%) !important;
    opacity: 0.5 !important;
    animation: subtle-float 12s ease-in-out infinite !important;
}

@keyframes subtle-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -20px) rotate(180deg); }
}

/* Professional support section */
.professional-support {
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    padding: 3rem !important;
    position: relative !important;
}

/* Professional icon containers with soft blue themes */
.professional-icon-wrapper {
    width: 80px !important;
    height: 80px !important;
    background: var(--button-gradient) !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem auto !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.professional-icon-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.professional-card:hover .professional-icon-wrapper::before {
    opacity: 1 !important;
}

/* Logo styling */
.romfast-logo {
    height: 60px !important;
    filter: brightness(1.05) contrast(1.05) !important;
}

/* Enhanced typography */
h1, h2, h3 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* Soft professional text colors */
.professional-text-primary {
    color: var(--foreground) !important;
}

.professional-text-secondary {
    color: var(--muted-foreground) !important;
}

/* Special featured card (ROA AUTO) - Muted red accent styling */
.professional-card-featured {
    background: var(--card) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: var(--shadow-xl) !important;
}

.professional-card-featured .professional-icon-wrapper {
    background: var(--red-gradient) !important;
}

/* Muted red bullet points for ROA AUTO problems */
.red-bullet {
    color: var(--accent) !important;
}

/* Enhanced hover effects for support cards */
.professional-support-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 2rem !important;
}

.professional-support-card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
}

/* Soft blue hover states for navigation */
.nav-link {
    transition: color 0.3s ease !important;
}

.nav-link:hover {
    color: #90caf9 !important; /* Gentle blue hover - softer than original */
}

/* Professional service sections with soft blue accents */
.service-technology {
    background: linear-gradient(135deg, rgba(82, 136, 196, 0.03), rgba(74, 123, 167, 0.03)) !important;
    border-left: 4px solid var(--primary) !important;
    padding: 1.5rem !important;
    border-radius: var(--radius) !important;
}

.service-reliability {
    background: linear-gradient(135deg, rgba(74, 123, 167, 0.03), rgba(82, 136, 196, 0.03)) !important;
    border-left: 4px solid var(--secondary) !important;
    padding: 1.5rem !important;
    border-radius: var(--radius) !important;
}

/* Dark mode adjustments for soft professional blue theme */
.dark-mode {
    --background: #141822 !important;
    --foreground: #e2e8f0 !important;
    --card: #1e2235 !important;
    --card-foreground: #e2e8f0 !important;
    --card-hover: #252a3e !important;
    --muted: #252a3e !important;
    --muted-foreground: #94a3b8 !important;
    --border: #334155 !important;
    --input: #1e2235 !important;
    --navbar-bg: linear-gradient(135deg, #0f172a, #1e293b) !important;
    --hero-gradient: linear-gradient(180deg, #1e2235, #141822) !important;
}

.dark-mode .professional-text-primary {
    color: var(--foreground) !important;
}

.dark-mode .professional-text-secondary {
    color: var(--muted-foreground) !important;
}

/* Mobile responsiveness for soft professional design */
@media (max-width: 768px) {
    .professional-hero {
        padding: 2rem 1.5rem !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .professional-card {
        border-radius: var(--radius-md) !important;
    }
    
    .professional-btn-primary,
    .professional-btn-secondary,
    .professional-btn-urgent {
        border-radius: var(--radius) !important;
    }
}