/* style.css - Pizza dos Cariocas (Design System Centralizado - Loja Física) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600;1,700&display=swap');

:root {
    --bg-primary: #0A0C10;
    --bg-card: #121620;
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
    --border-color: #2A3142;
    --brand-green: #008C45;
    --brand-green-hover: #006B34;
    --brand-red: #CD212A;
    --brand-red-hover: #A81A21;
    --brand-gold: #D4AF37;
    --brand-gold-hover: #B59228;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    font-size: 16px;
}

/* Cards Padronizados */
.app-card {
    background-color: var(--bg-card);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Inputs e Formulários */
.app-input {
    background-color: var(--bg-primary);
    color: var(--text-main);
    border: 2px solid var(--border-color);
    transition: border-color 0.2s ease, outline 0.2s ease;
}

.app-input:focus {
    border-color: var(--brand-gold);
    outline: none;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: #2A3142;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-gold);
}

/* Navegação e Estados Ativos Padronizados */
.nav-btn {
    color: #D1D5DB;
    border-bottom: 2px solid transparent;
}

.nav-btn:hover {
    color: var(--brand-gold);
}

.active-tab {
    border-bottom: 2px solid var(--brand-gold) !important;
    color: var(--brand-gold) !important;
    font-weight: 800 !important;
}

.active-size {
    border-color: var(--brand-gold) !important;
    background-color: rgba(212, 175, 55, 0.12) !important;
}

.active-crust {
    border-color: var(--brand-red) !important;
    background-color: rgba(205, 33, 42, 0.12) !important;
}

/* Toasts de Notificação */
#toast-container > div {
    will-change: transform, opacity;
}