/*
=========================================================================
   SPEAKK.LIVE - FINAL LOGO SYSTEM
   Official brand identity with purple "Speakk" + red ".live"
   
   FINAL VERSION:
   - "Speakk": Purple gradient (#a5b4fc → #8b5cf6 → #7c3aed)
   - ".live": Red gradient (#ff4444 → #dc2626 → #b91c1c)
   - Icon: Purple gradient microphone with red live dot
   
   Created: 2025-07-13
   Status: OFFICIAL BRAND LOGO
=========================================================================
*/

/* =========================================================================
   SEÇÃO 1: CSS VARIABLES - BRAND COLORS
   ========================================================================= */

:root {
    /* OFFICIAL BRAND COLORS */
    --speakk-gradient: linear-gradient(135deg, #a5b4fc 0%, #8b5cf6 50%, #7c3aed 100%);
    --live-gradient: linear-gradient(135deg, #ff4444 0%, #dc2626 50%, #b91c1c 100%);
    --icon-gradient: linear-gradient(135deg, #a5b4fc 0%, #8b5cf6 100%);
    --live-dot-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    
    /* Dark Theme Versions */
    --speakk-gradient-dark: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #9333ea 100%);
    --live-gradient-dark: linear-gradient(135deg, #ff5555 0%, #ef4444 50%, #dc2626 100%);
    
    /* Typography */
    --speakk-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --speakk-font-weight-normal: 700;
    --speakk-font-weight-bold: 800;
    
    /* Spacing */
    --speakk-gap-large: 16px;
    --speakk-gap-medium: 12px;
    --speakk-gap-small: 8px;
    --speakk-gap-mini: 6px;
    
    /* Icon Sizes */
    --speakk-icon-hero: 80px;
    --speakk-icon-large: 64px;
    --speakk-icon-medium: 48px;
    --speakk-icon-small: 36px;
    --speakk-icon-mini: 28px;
    --speakk-icon-favicon: 24px;
    
    /* Text Sizes */
    --speakk-text-hero: 4rem;
    --speakk-text-large: 3rem;
    --speakk-text-medium: 2rem;
    --speakk-text-small: 1.5rem;
    --speakk-text-mini: 1.25rem;
    
    /* Border Radius */
    --speakk-radius-large: 20px;
    --speakk-radius-medium: 16px;
    --speakk-radius-small: 12px;
    --speakk-radius-mini: 8px;
    
    /* Live Dot Sizes */
    --speakk-dot-large: 24px;
    --speakk-dot-medium: 20px;
    --speakk-dot-small: 16px;
    --speakk-dot-mini: 12px;
    --speakk-dot-favicon: 10px;
}

/* =========================================================================
   SEÇÃO 2: BASE LOGO STRUCTURE
   ========================================================================= */

.speakk-logo {
    display: flex;
    align-items: center;
    font-family: var(--speakk-font-family);
    text-decoration: none;
    color: inherit;
    user-select: none;
}

.speakk-icon {
    position: relative;
    background: var(--icon-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.speakk-text {
    display: flex;
    align-items: baseline;
}

.speakk-brand {
    background: var(--speakk-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--speakk-font-weight-normal);
}

.speakk-domain {
    background: var(--live-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--speakk-font-weight-bold);
}

.speakk-live-dot {
    position: absolute;
    background: var(--live-dot-gradient);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    animation: speakkPulse 2s infinite ease-in-out;
}

/* Pulse Animation */
@keyframes speakkPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    }
    50% { 
        transform: scale(1.15); 
        opacity: 0.85;
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.6);
    }
}

/* =========================================================================
   SEÇÃO 3: LOGO SIZE VARIATIONS
   ========================================================================= */

/* Hero Logo (Landing page hero sections) */
.speakk-logo-hero {
    gap: var(--speakk-gap-large);
    font-size: var(--speakk-text-hero);
}

.speakk-logo-hero .speakk-icon {
    width: var(--speakk-icon-hero);
    height: var(--speakk-icon-hero);
    border-radius: var(--speakk-radius-large);
    font-size: 2.5rem;
}

.speakk-logo-hero .speakk-live-dot {
    width: var(--speakk-dot-large);
    height: var(--speakk-dot-large);
    top: -8px;
    right: -8px;
    border-width: 4px;
}

/* Large Logo (Headers, main sections) */
.speakk-logo-large {
    gap: var(--speakk-gap-large);
    font-size: var(--speakk-text-large);
}

.speakk-logo-large .speakk-icon {
    width: var(--speakk-icon-large);
    height: var(--speakk-icon-large);
    border-radius: var(--speakk-radius-medium);
    font-size: 2rem;
}

.speakk-logo-large .speakk-live-dot {
    width: var(--speakk-dot-medium);
    height: var(--speakk-dot-medium);
    top: -6px;
    right: -6px;
    border-width: 3px;
}

/* Medium Logo (Navigation, standard use) */
.speakk-logo-medium {
    gap: var(--speakk-gap-medium);
    font-size: var(--speakk-text-medium);
}

.speakk-logo-medium .speakk-icon {
    width: var(--speakk-icon-medium);
    height: var(--speakk-icon-medium);
    border-radius: var(--speakk-radius-small);
    font-size: 1.5rem;
}

.speakk-logo-medium .speakk-live-dot {
    width: var(--speakk-dot-small);
    height: var(--speakk-dot-small);
    top: -4px;
    right: -4px;
    border-width: 2px;
}

/* Small Logo (Mobile, compact areas) */
.speakk-logo-small {
    gap: var(--speakk-gap-small);
    font-size: var(--speakk-text-small);
}

.speakk-logo-small .speakk-icon {
    width: var(--speakk-icon-small);
    height: var(--speakk-icon-small);
    border-radius: var(--speakk-radius-mini);
    font-size: 1.25rem;
}

.speakk-logo-small .speakk-live-dot {
    width: var(--speakk-dot-mini);
    height: var(--speakk-dot-mini);
    top: -3px;
    right: -3px;
    border-width: 2px;
}

/* Mini Logo (Very compact spaces) */
.speakk-logo-mini {
    gap: var(--speakk-gap-mini);
    font-size: var(--speakk-text-mini);
}

.speakk-logo-mini .speakk-icon {
    width: var(--speakk-icon-mini);
    height: var(--speakk-icon-mini);
    border-radius: var(--speakk-radius-mini);
    font-size: 1rem;
}

.speakk-logo-mini .speakk-live-dot {
    width: var(--speakk-dot-mini);
    height: var(--speakk-dot-mini);
    top: -2px;
    right: -2px;
    border-width: 1px;
}

/* =========================================================================
   SEÇÃO 4: ICON-ONLY VERSIONS
   ========================================================================= */

.speakk-icon-only {
    position: relative;
    background: var(--icon-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.speakk-icon-only::after {
    content: '';
    position: absolute;
    background: var(--live-dot-gradient);
    border-radius: 50%;
    border: 2px solid white;
    animation: speakkPulse 2s infinite ease-in-out;
}

/* Icon Only Sizes */
.speakk-icon-hero {
    width: var(--speakk-icon-hero);
    height: var(--speakk-icon-hero);
    border-radius: var(--speakk-radius-large);
    font-size: 2.5rem;
}

.speakk-icon-hero::after {
    width: var(--speakk-dot-large);
    height: var(--speakk-dot-large);
    top: -8px;
    right: -8px;
    border-width: 4px;
}

.speakk-icon-large {
    width: var(--speakk-icon-large);
    height: var(--speakk-icon-large);
    border-radius: var(--speakk-radius-medium);
    font-size: 2rem;
}

.speakk-icon-large::after {
    width: var(--speakk-dot-medium);
    height: var(--speakk-dot-medium);
    top: -6px;
    right: -6px;
    border-width: 3px;
}

.speakk-icon-medium {
    width: var(--speakk-icon-medium);
    height: var(--speakk-icon-medium);
    border-radius: var(--speakk-radius-small);
    font-size: 1.5rem;
}

.speakk-icon-medium::after {
    width: var(--speakk-dot-small);
    height: var(--speakk-dot-small);
    top: -4px;
    right: -4px;
    border-width: 2px;
}

.speakk-icon-small {
    width: var(--speakk-icon-small);
    height: var(--speakk-icon-small);
    border-radius: var(--speakk-radius-mini);
    font-size: 1.25rem;
}

.speakk-icon-small::after {
    width: var(--speakk-dot-mini);
    height: var(--speakk-dot-mini);
    top: -3px;
    right: -3px;
    border-width: 2px;
}

.speakk-icon-favicon {
    width: var(--speakk-icon-favicon);
    height: var(--speakk-icon-favicon);
    border-radius: 6px;
    font-size: 0.875rem;
}

.speakk-icon-favicon::after {
    width: var(--speakk-dot-favicon);
    height: var(--speakk-dot-favicon);
    top: -2px;
    right: -2px;
    border-width: 1px;
}

/* =========================================================================
   SEÇÃO 5: TEXT-ONLY VERSIONS
   ========================================================================= */

.speakk-text-hero {
    font-family: var(--speakk-font-family);
    font-size: var(--speakk-text-hero);
    display: flex;
    align-items: baseline;
}

.speakk-text-large {
    font-family: var(--speakk-font-family);
    font-size: var(--speakk-text-large);
    display: flex;
    align-items: baseline;
}

.speakk-text-medium {
    font-family: var(--speakk-font-family);
    font-size: var(--speakk-text-medium);
    display: flex;
    align-items: baseline;
}

.speakk-text-small {
    font-family: var(--speakk-font-family);
    font-size: var(--speakk-text-small);
    display: flex;
    align-items: baseline;
}

/* =========================================================================
   SEÇÃO 6: DARK THEME SUPPORT
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    :root {
        --speakk-gradient: var(--speakk-gradient-dark);
        --live-gradient: var(--live-gradient-dark);
    }
}

.dark-theme .speakk-brand,
.speakk-logo-dark .speakk-brand {
    background: var(--speakk-gradient-dark);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark-theme .speakk-domain,
.speakk-logo-dark .speakk-domain {
    background: var(--live-gradient-dark);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================================================
   SEÇÃO 7: INTERACTIVE STATES
   ========================================================================= */

.speakk-logo-interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.speakk-logo-interactive:hover {
    transform: translateY(-2px);
}

.speakk-logo-interactive:hover .speakk-live-dot {
    animation-duration: 1s;
}

.speakk-logo-interactive:hover .speakk-icon {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.speakk-logo-interactive:active {
    transform: translateY(0);
}

/* =========================================================================
   SEÇÃO 8: UTILITY CLASSES
   ========================================================================= */

/* Animation Controls */
.speakk-no-animation .speakk-live-dot,
.speakk-no-animation::after {
    animation: none;
}

.speakk-fast-animation .speakk-live-dot,
.speakk-fast-animation::after {
    animation-duration: 1s;
}

.speakk-slow-animation .speakk-live-dot,
.speakk-slow-animation::after {
    animation-duration: 3s;
}

/* Monochrome Fallback */
.speakk-monochrome .speakk-brand {
    background: none;
    -webkit-text-fill-color: #7c3aed;
    color: #7c3aed;
}

.speakk-monochrome .speakk-domain {
    background: none;
    -webkit-text-fill-color: #dc2626;
    color: #dc2626;
}

/* Responsive Helpers */
@media (max-width: 640px) {
    .speakk-responsive .speakk-text {
        display: none;
    }
    
    .speakk-responsive {
        gap: 0;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .speakk-brand {
        background: none;
        -webkit-text-fill-color: #7c3aed;
        color: #7c3aed;
    }
    
    .speakk-domain {
        background: none;
        -webkit-text-fill-color: #dc2626;
        color: #dc2626;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .speakk-live-dot,
    .speakk-icon-only::after {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .speakk-live-dot,
    .speakk-icon-only::after {
        animation: none;
        background: #dc2626 !important;
    }
    
    .speakk-brand {
        background: none !important;
        -webkit-text-fill-color: #7c3aed !important;
        color: #7c3aed !important;
    }
    
    .speakk-domain {
        background: none !important;
        -webkit-text-fill-color: #dc2626 !important;
        color: #dc2626 !important;
    }
}