/* ============================================
   VARIÁVEIS DE CORES DO PROJETO
   ============================================
   Este arquivo centraliza todas as cores usadas no projeto.
   Para modificar as cores, altere apenas os valores abaixo.
   ============================================ */

:root {
    /* ===== CORES PRINCIPAIS (VERMELHO DO HUB) ===== */
    --color-primary: #dc2626;              /* Vermelho vibrante (botões, links ativos) */
    --color-primary-dark: #b91c1c;        /* Vermelho escuro (hover, gradientes) */
    --color-primary-light: #ef4444;        /* Vermelho claro (elementos suaves) */
    --color-primary-darker: #991b1b;       /* Vermelho mais escuro (hover intenso) */
    
    /* ===== CORES SECUNDÁRIAS (ROXO DO HUB) ===== */
    --color-secondary: #6b21a8;            /* Roxo vibrante (header, destaques) */
    --color-secondary-dark: #581c87;      /* Roxo escuro (hover) */
    --color-secondary-light: #7c3aed;      /* Roxo claro (elementos suaves) */
    --color-secondary-darker: #4c1d95;     /* Roxo mais escuro (hover intenso) */
    
    /* ===== CORES DE STATUS ===== */
    --color-success: #28a745;              /* Verde - Aberto, sucesso */
    --color-error: #dc3545;                /* Vermelho - Fechado, erro */
    --color-warning: #ffc107;               /* Amarelo - Aviso */
    --color-info: #17a2b8;                 /* Azul - Informação */
    
    /* ===== CORES DE FUNDO ===== */
    --bg-primary: #0a0a0a;                 /* Fundo principal (preto escuro) */
    --bg-secondary: rgba(30, 30, 46, 0.4); /* Fundo secundário (glassmorphism) */
    --bg-tertiary: rgba(30, 30, 46, 0.5);  /* Fundo terciário (glassmorphism hover) */
    --bg-dark: rgba(30, 30, 46, 0.3);      /* Fundo escuro (cards fechados) */
    --bg-darker: #0a0a0a;                   /* Fundo mais escuro */
    --bg-overlay: rgba(0, 0, 0, 0.6);      /* Overlay escuro (modais) */
    
    /* ===== CORES DE TEXTO ===== */
    --text-primary: #ffffff;                /* Texto principal (branco) */
    --text-secondary: rgba(255, 255, 255, 0.8); /* Texto secundário (branco translúcido) */
    --text-tertiary: rgba(255, 255, 255, 0.6);  /* Texto terciário (branco mais translúcido) */
    --text-light: rgba(255, 255, 255, 0.4);     /* Texto claro */
    --text-white: #ffffff;                  /* Texto branco */
    --text-dark: #cbd5e1;                   /* Texto escuro (cinza claro) */
    
    /* ===== CORES DE BORDAS ===== */
    --border-light: rgba(255, 255, 255, 0.1);  /* Borda clara (glassmorphism) */
    --border-medium: rgba(255, 255, 255, 0.15); /* Borda média */
    --border-dark: rgba(255, 255, 255, 0.05);  /* Borda escura */
    --border-primary: rgba(220, 38, 38, 0.3);  /* Borda com cor primária */
    
    /* ===== CORES DE SOMBRAS ===== */
    --shadow-sm: rgba(0, 0, 0, 0.05);      /* Sombra pequena */
    --shadow-md: rgba(0, 0, 0, 0.1);       /* Sombra média */
    --shadow-lg: rgba(0, 0, 0, 0.15);      /* Sombra grande */
    --shadow-primary: rgba(92, 198, 195, 0.25);  /* Sombra com cor primária */
    --shadow-primary-hover: rgba(92, 198, 195, 0.4); /* Sombra primária hover */
    
    /* ===== CORES ESPECÍFICAS DO CARRINHO ===== */
    --cart-header-bg: linear-gradient(135deg, #2c3e50, #34495e);
    --cart-bg: linear-gradient(135deg, #f8f9fa, #ffffff);
    --cart-footer-bg: linear-gradient(135deg, #f8f9fa, #e9ecef);
    
    /* ===== CORES DE BOTÕES ===== */
    --btn-primary-bg: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --btn-primary-hover: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;
    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #c82333;
    
    /* ===== CORES DE INPUTS ===== */
    --input-border: #e9ecef;
    --input-border-focus: var(--color-secondary);
    --input-bg: #f8f9fa;
    --input-bg-focus: #ffffff;
    
    /* ===== CORES DE BADGES/TAGS ===== */
    --badge-success: #28a745;
    --badge-error: #dc3545;
    --badge-warning: #ffc107;
    --badge-info: #17a2b8;
    --badge-primary: var(--color-primary);
    
    /* ===== CORES DE LINKS ===== */
    --link-color: var(--color-primary);
    --link-hover: var(--color-primary-dark);
    --link-active: var(--color-primary-darker);
    
    /* ===== CORES DO WHATSAPP ===== */
    --whatsapp-color: #25D366;
    --whatsapp-hover: #128C7E;
    
    /* ===== CORES DE SCROLLBAR ===== */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --scrollbar-thumb-hover: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
}

/* ===== MODOS ESCURO (FUTURO) ===== */
/* Descomente quando quiser suportar modo escuro */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
    }
}
*/