/**
 * Sofia Gastrobar - Branding CSS
 * Gradiente e tipografia inspirados na fachada física do restaurante
 */

/* Importar Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Poppins:wght@400;600;700;900&display=swap');

/* Gradiente da Fachada: Azul → Vermelho */
.sofia-gradient {
    background: linear-gradient(135deg, #264653 0%, #e63946 100%);
}

.sofia-text-gradient {
    background: linear-gradient(135deg, #264653 0%, #e63946 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Tipografia da Fachada */
.sofia-name {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.sofia-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}

.sofia-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Variações do gradiente para diferentes elementos */
.sofia-gradient-light {
    background: linear-gradient(135deg, rgba(38, 70, 83, 0.8) 0%, rgba(230, 57, 70, 0.8) 100%);
}

.sofia-gradient-dark {
    background: linear-gradient(135deg, #1a4a54 0%, #c42e3a 100%);
}

/* Sombras personalizadas */
.sofia-shadow {
    box-shadow: 0 4px 15px rgba(38, 70, 83, 0.2), 0 2px 8px rgba(230, 57, 70, 0.1);
}

.sofia-text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2), 1px 1px 2px rgba(38, 70, 83, 0.1);
}

/* Elementos interativos */
.sofia-button {
    background: linear-gradient(135deg, #264653 0%, #e63946 100%);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(38, 70, 83, 0.3);
}

.sofia-button:hover {
    background: linear-gradient(135deg, #1a4a54 0%, #c42e3a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(38, 70, 83, 0.4), 0 2px 8px rgba(230, 57, 70, 0.2);
}

/* Cor palette da fachada */
:root {
    --sofia-azul: #264653;
    --sofia-azul-escuro: #1a4a54;
    --sofia-vermelho: #e63946;
    --sofia-vermelho-escuro: #c42e3a;
    --sofia-branco: #f8f9fa;
    --sofia-cinza: #6c757d;
}

/* Classes utilitárias */
.text-sofia-azul { color: var(--sofia-azul); }
.text-sofia-vermelho { color: var(--sofia-vermelho); }
.bg-sofia-azul { background-color: var(--sofia-azul); }
.bg-sofia-vermelho { background-color: var(--sofia-vermelho); }

/* Animações especiais */
.sofia-pulse {
    animation: sofia-pulse 2s infinite;
}

@keyframes sofia-pulse {
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

/* Responsividade */
@media (max-width: 768px) {
    .sofia-name {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
    
    .sofia-title {
        font-size: clamp(1.2rem, 3vw, 2rem);
    }
}

/* Print styles */
@media print {
    .sofia-gradient,
    .sofia-text-gradient {
        background: #264653 !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
    }
}