/**
 * Cars180 Brand Styles
 * Your Personal Car-Finding Agent
 * 
 * Usage: Import this CSS file and use the HTML components below
 */

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

/* ========================================
   CSS VARIABLES (Brand Colors)
   ======================================== */
:root {
    /* Primary Colors */
    --cars180-black: #1a1a1a;
    --cars180-indigo: #6366F1;
    --cars180-gray: #666666;
    
    /* Rainbow Gradient */
    --cars180-rainbow: linear-gradient(
        90deg,
        #00D4FF 0%,
        #00F5A0 15%,
        #7FFF00 28%,
        #FFE000 42%,
        #FF9500 56%,
        #FF4D6A 70%,
        #E040FB 85%,
        #A855F7 100%
    );
    
    /* Background Colors */
    --cars180-bg-white: #FFFFFF;
    --cars180-bg-off-white: #fafbfc;
    --cars180-bg-lavender: #faf8ff;
    --cars180-bg-light-gray: #f8f9fc;
    
    /* Fonts */
    --font-brand: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ========================================
   FULL LOGO (Hero Sections, Landing Pages)
   ======================================== */
/*
HTML Structure:
<div class="cars180-logo">
    <div class="cars180-logo__icon">
        <span class="cars180-logo__car">🚗</span>
        <div class="cars180-logo__arc"></div>
    </div>
    <h1 class="cars180-logo__name">Cars180</h1>
    <p class="cars180-logo__tagline">Your Personal Car-Finding Agent</p>
    <p class="cars180-logo__subline">Find your best deal, effortlessly.</p>
</div>
*/

.cars180-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cars180-logo__icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.cars180-logo__car {
    font-size: 3.2rem;
    z-index: 2;
    margin-bottom: -22px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.cars180-logo__arc {
    width: 200px;
    height: 100px;
    background: var(--cars180-rainbow);
    border-radius: 200px 200px 0 0;
}

.cars180-logo__name {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 2.8rem;
    color: var(--cars180-black);
    letter-spacing: -1px;
    margin: 0;
}

.cars180-logo__tagline {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cars180-indigo);
    margin: 5px 0 0 0;
}

.cars180-logo__subline {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--cars180-gray);
    margin: 8px 0 0 0;
}

/* ========================================
   COMPACT LOGO (Navbar, Headers)
   ======================================== */
/*
HTML Structure:
<a href="/" class="cars180-logo-compact">
    <div class="cars180-logo-compact__icon">
        <span class="cars180-logo-compact__car">🚗</span>
        <div class="cars180-logo-compact__arc"></div>
    </div>
    <span class="cars180-logo-compact__name">Cars180</span>
</a>
*/

.cars180-logo-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.cars180-logo-compact__icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cars180-logo-compact__car {
    font-size: 1.5rem;
    margin-bottom: -10px;
    z-index: 2;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

.cars180-logo-compact__arc {
    width: 55px;
    height: 27px;
    background: var(--cars180-rainbow);
    border-radius: 55px 55px 0 0;
}

.cars180-logo-compact__name {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--cars180-black);
    letter-spacing: -0.5px;
}

/* ========================================
   LOGO ONLY (No Text - for small spaces)
   ======================================== */
/*
HTML Structure:
<div class="cars180-icon">
    <span class="cars180-icon__car">🚗</span>
    <div class="cars180-icon__arc"></div>
</div>
*/

.cars180-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cars180-icon__car {
    font-size: 2rem;
    margin-bottom: -12px;
    z-index: 2;
}

.cars180-icon__arc {
    width: 70px;
    height: 35px;
    background: var(--cars180-rainbow);
    border-radius: 70px 70px 0 0;
}

/* ========================================
   FAVICON STYLE (32x32)
   ======================================== */
.cars180-favicon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 4px;
}

.cars180-favicon__car {
    font-size: 0.9rem;
    margin-bottom: -4px;
    z-index: 2;
}

.cars180-favicon__arc {
    width: 22px;
    height: 11px;
    background: linear-gradient(90deg, #00D4FF, #00F5A0, #FFE000, #FF4D6A, #A855F7);
    border-radius: 22px 22px 0 0;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    .cars180-logo__name {
        font-size: 2rem;
    }
    
    .cars180-logo__arc {
        width: 140px;
        height: 70px;
        border-radius: 140px 140px 0 0;
    }
    
    .cars180-logo__car {
        font-size: 2.4rem;
        margin-bottom: -16px;
    }
    
    .cars180-logo__tagline {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }
    
    .cars180-logo__subline {
        font-size: 0.85rem;
    }
    
    /* Compact logo on mobile */
    .cars180-logo-compact__name {
        font-size: 1.3rem;
    }
    
    .cars180-logo-compact__arc {
        width: 45px;
        height: 22px;
        border-radius: 45px 45px 0 0;
    }
    
    .cars180-logo-compact__car {
        font-size: 1.2rem;
        margin-bottom: -8px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background utilities */
.bg-cars180-white { background-color: var(--cars180-bg-white); }
.bg-cars180-lavender { background-color: var(--cars180-bg-lavender); }
.bg-cars180-light { background-color: var(--cars180-bg-light-gray); }

/* Text color utilities */
.text-cars180-black { color: var(--cars180-black); }
.text-cars180-indigo { color: var(--cars180-indigo); }
.text-cars180-gray { color: var(--cars180-gray); }

/* Font utilities */
.font-brand { font-family: var(--font-brand); }
.font-body { font-family: var(--font-body); }