/*
 * Vista - se Bem - Paleta de Cores Dourada Elegante
 * Arquivo centralizado para garantir consistência em todo o site
 */

:root {
    /* === CORES DOURADO LUXUOSO === */
    --dourado-principal: #C9A96E;      /* Dourado elegante premium */
    --dourado-claro: #F4E4BC;          /* Dourado suave para backgrounds */
    --dourado-medio: #B8941F;          /* Dourado médio vibrante */
    --dourado-escuro: #8B6914;         /* Dourado escuro sofisticado */
    --dourado-hover: #6D4C0F;          /* Dourado para estados de hover */
    --dourado-metalico: #D4AF37;       /* Dourado metálico clássico */
    --dourado-brilhante: #FFD700;      /* Dourado brilhante para destaques */
    
    /* === CORES COMPLEMENTARES === */
    --branco-puro: #FFFFFF;
    --branco-dourado: #FFFEF7;         /* Branco com toque de dourado */
    --creme: #FFF8DC;                  /* Creme suave */
    --cinza-claro: #F5F5F5;
    --cinza-medio: #9E9E9E;
    --cinza-escuro: #424242;
    --preto-suave: #212121;
    
    /* === CORES DE STATUS === */
    --sucesso: #228B22;                /* Verde dourado */
    --aviso: #FF8C00;                  /* Laranja dourado */
    --erro: #DC143C;                   /* Vermelho elegante */
    --info: #4169E1;                   /* Azul royal */
    
    /* === GRADIENTES === */
    --gradiente-dourado-principal: linear-gradient(135deg, var(--dourado-claro) 0%, var(--dourado-principal) 100%);
    --gradiente-dourado-sutil: linear-gradient(135deg, var(--branco-dourado) 0%, var(--dourado-claro) 100%);
    --gradiente-dourado-forte: linear-gradient(135deg, var(--dourado-principal) 0%, var(--dourado-escuro) 100%);
    
    /* === SOMBRAS === */
    --sombra-suave: 0 2px 10px rgba(201, 169, 110, 0.15);
    --sombra-media: 0 4px 20px rgba(201, 169, 110, 0.25);
    --sombra-forte: 0 8px 30px rgba(201, 169, 110, 0.35);
    
    /* === TRANSPARÊNCIAS === */
    --dourado-transparente-10: rgba(201, 169, 110, 0.1);
    --dourado-transparente-20: rgba(201, 169, 110, 0.2);
    --dourado-transparente-30: rgba(201, 169, 110, 0.3);
    --dourado-transparente-50: rgba(201, 169, 110, 0.5);
    
    /* === BORDERS === */
    --border-dourado-claro: 1px solid var(--dourado-claro);
    --border-dourado-medio: 1px solid var(--dourado-principal);
    --border-dourado-escuro: 1px solid var(--dourado-escuro);
    
    /* === TIPOGRAFIA === */
    --fonte-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fonte-elegante: 'Playfair Display', Georgia, serif;
    
    /* === ESPAÇAMENTOS === */
    --espacamento-xs: 0.25rem;      /* 4px */
    --espacamento-sm: 0.5rem;       /* 8px */
    --espacamento-md: 1rem;         /* 16px */
    --espacamento-lg: 1.5rem;       /* 24px */
    --espacamento-xl: 2rem;         /* 32px */
    --espacamento-xxl: 3rem;        /* 48px */
    
    /* === BORDAS ARREDONDADAS === */
    --border-radius-sm: 0.375rem;   /* 6px */
    --border-radius-md: 0.5rem;     /* 8px */
    --border-radius-lg: 0.75rem;    /* 12px */
    --border-radius-xl: 1rem;       /* 16px */
    --border-radius-pill: 50rem;    /* Pills/badges */
    
    /* === TRANSIÇÕES === */
    --transicao-rapida: all 0.15s ease-in-out;
    --transicao-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-lenta: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-navbar: 1030;
    --z-sidebar: 1040;
}

/* === CLASSES UTILITÁRIAS DE CORES === */

/* Backgrounds */
.bg-rosa-principal { background-color: var(--rosa-principal) !important; }
.bg-rosa-claro { background-color: var(--rosa-claro) !important; }
.bg-rosa-medio { background-color: var(--rosa-medio) !important; }
.bg-rosa-escuro { background-color: var(--rosa-escuro) !important; }
.bg-branco-rosa { background-color: var(--branco-rosa) !important; }

/* Gradientes */
.bg-gradiente-rosa { background: var(--gradiente-rosa-principal) !important; }
.bg-gradiente-sutil { background: var(--gradiente-rosa-sutil) !important; }
.bg-gradiente-forte { background: var(--gradiente-rosa-forte) !important; }

/* Textos */
.text-rosa-principal { color: var(--rosa-principal) !important; }
.text-rosa-claro { color: var(--rosa-claro) !important; }
.text-rosa-medio { color: var(--rosa-medio) !important; }
.text-rosa-escuro { color: var(--rosa-escuro) !important; }

/* Borders */
.border-rosa-principal { border-color: var(--rosa-principal) !important; }
.border-rosa-claro { border-color: var(--rosa-claro) !important; }
.border-rosa-escuro { border-color: var(--rosa-escuro) !important; }

/* Sombras */
.shadow-rosa-suave { box-shadow: var(--sombra-suave) !important; }
.shadow-rosa-media { box-shadow: var(--sombra-media) !important; }
.shadow-rosa-forte { box-shadow: var(--sombra-forte) !important; }

/* === UTILITÁRIOS DE HOVER === */
.hover-rosa-principal:hover {
    background-color: var(--rosa-principal) !important;
    transition: var(--transicao-normal);
}

.hover-rosa-escuro:hover {
    background-color: var(--rosa-escuro) !important;
    color: white !important;
    transition: var(--transicao-normal);
}

.hover-elevacao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
    transition: var(--transicao-normal);
}

/* === GLASSMORPHISM === */
.glass-rosa {
    background: rgba(248, 187, 208, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(248, 187, 208, 0.2);
}

.glass-branco {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* === RESPONSIVIDADE PARA CORES === */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transicao-rapida: none;
        --transicao-normal: none;
        --transicao-lenta: none;
    }
}

@media (max-width: 576px) {
    :root {
        /* Ajustes de espaçamento para mobile */
        --espacamento-md: 0.75rem;
        --espacamento-lg: 1rem;
        --espacamento-xl: 1.5rem;
        --espacamento-xxl: 2rem;
    }
}

/* === MODO ESCURO (FUTURO) === */
@media (prefers-color-scheme: dark) {
    :root {
        /* Variáveis para modo escuro, caso seja implementado no futuro */
        --dourado-principal-dark: #8B6914;
        --dourado-claro-dark: #C9A96E;
        --background-dark: #121212;
        --surface-dark: #1E1E1E;
        --text-dark: #E0E0E0;
    }
}