/* ===========================================
   FALAFADA - Theme Colors & Variables
   Versão: 1.0.0
   
   ARQUIVO CENTRALIZADO DE CORES
   Todas as cores do sistema estão aqui.
   Para mudar o tema, altere apenas este arquivo.
   =========================================== */

:root {
    /* ========================================
       CORES PRINCIPAIS DO GRADIENTE
       Usadas em botões, headers, CTAs
       ======================================== */
    --color-primary-start: #0077B6;      /* Azul Atlético - Início dos gradientes principais */
    --color-primary-end: #023E8A;        /* Azul Profundo - Fim dos gradientes principais */
    
    --color-secondary-start: #FF6B35;    /* Laranja Esportivo - Início dos gradientes secundários */
    --color-secondary-end: #F7931E;      /* Laranja Vibrante - Fim dos gradientes secundários */
    
    --color-success-start: #06D6A0;      /* Verde Vitória - Início dos gradientes de sucesso/info */
    --color-success-end: #1B9AAA;        /* Verde-Azulado - Fim dos gradientes de sucesso/info */
    
    --color-dark-start: #03045E;         /* Azul Marinho Escuro - Início dos gradientes escuros (footer, hero) */
    --color-dark-end: #023E8A;           /* Azul Marinho - Fim dos gradientes escuros */
    
    /* ========================================
       GRADIENTES APLICADOS
       Combinações prontas para uso
       ======================================== */
    --primary-gradient: linear-gradient(135deg, var(--color-primary-start) 0%, var(--color-primary-end) 100%);
    --secondary-gradient: linear-gradient(135deg, var(--color-secondary-start) 0%, var(--color-secondary-end) 100%);
    --success-gradient: linear-gradient(135deg, var(--color-success-start) 0%, var(--color-success-end) 100%);
    --dark-gradient: linear-gradient(135deg, var(--color-dark-start) 0%, var(--color-dark-end) 100%);
    
    /* ========================================
       CORES DE BACKGROUND
       Fundos de seções e cards
       ======================================== */
    --bg-white: #ffffff;                 /* Branco puro - Cards, navbar, modais */
    --bg-light: #f8f9fa;                 /* Cinza muito claro - Seções alternadas */
    --bg-light-alt: #e9ecef;             /* Cinza claro - Seções alternadas */
    --bg-gradient-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* Gradiente claro suave */
    
    /* ========================================
       CORES DE TEXTO
       Hierarquia de textos
       ======================================== */
    --text-dark: #1a202c;                /* Preto azulado - Títulos e textos principais */
    --text-gray: #2d3748;                /* Cinza escuro - Textos secundários */
    --text-muted: #718096;               /* Cinza médio - Textos auxiliares */
    --text-light: #a0aec0;               /* Cinza claro - Placeholders e textos desativados */
    --text-white: #ffffff;               /* Branco - Textos em backgrounds escuros */
    
    /* ========================================
       CORES DE CATEGORIAS E TAGS
       Badges e labels
       ======================================== */
    --badge-primary: var(--primary-gradient);        /* Badge padrão com gradiente roxo */
    --badge-secondary: var(--secondary-gradient);    /* Badge secundário com gradiente rosa */
    --badge-success: var(--success-gradient);        /* Badge de sucesso com gradiente azul */
    
    /* ========================================
       CORES ESPECIAIS PARA PÁGINAS
       ======================================== */
    
    /* Hero Section - Home */
    --hero-gradient: var(--dark-gradient);           /* Gradiente do hero principal */
    --hero-overlay-opacity: 0.1;                     /* Opacidade das bolhas decorativas */
    
    /* Archive Page */
    --archive-hero-start: #0077B6;                   /* Azul Atlético - Hero de arquivo */
    --archive-hero-end: #023E8A;                     /* Azul Profundo - Hero de arquivo */
    --archive-gradient: linear-gradient(135deg, var(--archive-hero-start) 0%, var(--archive-hero-end) 100%);
    
    /* Category Page */
    --category-hero-start: #FF6B35;                  /* Laranja Energia - Hero de categoria */
    --category-hero-end: #F7931E;                    /* Laranja Dourado - Hero de categoria */
    --category-gradient: linear-gradient(135deg, var(--category-hero-start) 0%, var(--category-hero-end) 100%);
    
    /* Search Page */
    --search-hero-start: #06D6A0;                    /* Verde Vitória - Hero de busca */
    --search-hero-end: #1B9AAA;                      /* Verde-Azulado - Hero de busca */
    --search-gradient: linear-gradient(135deg, var(--search-hero-start) 0%, var(--search-hero-end) 100%);
    
    /* Post Header */
    --post-header-start: #f8f9fa;                    /* Cinza muito claro - Header do post */
    --post-header-end: #e9ecef;                      /* Cinza claro - Header do post */
    --post-header-gradient: linear-gradient(135deg, var(--post-header-start) 0%, var(--post-header-end) 100%);
    
    /* ========================================
       CORES DE LINKS
       Estados de interação
       ======================================== */
    --link-color: var(--color-primary-start);        /* Cor padrão dos links */
    --link-hover: var(--color-primary-end);          /* Cor ao passar o mouse */
    --link-visited: var(--color-primary-end);        /* Cor de links visitados */
    
    /* ========================================
       CORES DE BORDAS
       Separadores e delimitadores
       ======================================== */
    --border-light: #e2e8f0;             /* Borda clara - Separadores sutis */
    --border-medium: #cbd5e0;            /* Borda média - Separadores visíveis */
    --border-white-opacity: rgba(255, 255, 255, 0.1); /* Borda branca transparente para backgrounds escuros */
    
    /* ========================================
       CORES DE OVERLAY E TRANSPARÊNCIAS
       Camadas semi-transparentes
       ======================================== */
    --overlay-white-10: rgba(255, 255, 255, 0.1);    /* Overlay branco 10% */
    --overlay-white-25: rgba(255, 255, 255, 0.25);   /* Overlay branco 25% */
    --overlay-black-10: rgba(0, 0, 0, 0.1);          /* Overlay preto 10% */
    --overlay-black-30: rgba(0, 0, 0, 0.3);          /* Overlay preto 30% */
    
    /* ========================================
       CORES DE SOMBRAS
       Elevação de elementos
       ======================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);       /* Sombra pequena */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);       /* Sombra média */
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);     /* Sombra grande */
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);     /* Sombra extra grande */
    --shadow-primary: 0 4px 15px rgba(0, 119, 182, 0.4);  /* Sombra com cor primária (azul) */
    --shadow-primary-hover: 0 6px 25px rgba(0, 119, 182, 0.6); /* Sombra primária hover */
    
    /* ========================================
       CORES DE ESTADOS
       Feedback visual
       ======================================== */
    --state-warning: #f6ad55;            /* Laranja - Avisos */
    --state-error: #fc8181;              /* Vermelho claro - Erros */
    --state-info: var(--color-success-start); /* Azul - Informações */
    
    /* ========================================
       CORES ESPECÍFICAS DE COMPONENTES
       ======================================== */
    
    /* Navbar */
    --navbar-bg: rgba(255, 255, 255, 0.95);          /* Background da navbar com transparência */
    --navbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Sombra da navbar */
    
    /* Dropdown */
    --dropdown-bg: var(--bg-white);                  /* Background dos dropdowns */
    --dropdown-hover: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); /* Background ao passar o mouse */
    
    /* Cards */
    --card-bg: var(--bg-white);                      /* Background dos cards */
    --card-shadow: var(--shadow-lg);                 /* Sombra padrão dos cards */
    --card-shadow-hover: var(--shadow-xl);           /* Sombra dos cards ao passar o mouse */
    
    /* Footer */
    --footer-gradient: var(--dark-gradient);         /* Gradiente do footer */
    --footer-text: var(--text-white);                /* Cor do texto no footer */
    
    /* Sidebar */
    --sidebar-card-header-1: linear-gradient(135deg, var(--color-primary-start) 0%, var(--color-primary-end) 100%); /* Header do card de posts recentes */
    --sidebar-card-header-2: linear-gradient(135deg, var(--color-success-start) 0%, var(--color-success-end) 100%); /* Header do card de categorias */
    --sidebar-cta-gradient: linear-gradient(135deg, var(--color-secondary-start) 0%, var(--color-secondary-end) 100%); /* CTA do sidebar */
    
    /* Pagination */
    --pagination-active-bg: var(--primary-gradient); /* Background do botão ativo */
    --pagination-hover-bg: var(--primary-gradient);  /* Background ao passar o mouse */
    --pagination-disabled-bg: var(--bg-light);       /* Background dos botões desativados */
    --pagination-text: var(--color-primary-start);   /* Cor do texto */
    
    /* Scroll to Top */
    --scroll-top-bg: var(--primary-gradient);        /* Background do botão */
    --scroll-top-shadow: var(--shadow-primary);      /* Sombra do botão */
    --scroll-top-shadow-hover: var(--shadow-primary-hover); /* Sombra ao passar o mouse */
    
    /* Search Modal */
    --modal-bg: var(--bg-white);                     /* Background do modal */
    --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);  /* Sombra do modal */
    
    /* ========================================
       CORES DE ÍCONES
       FontAwesome e outros ícones
       ======================================== */
    --icon-primary: var(--color-primary-start);      /* Ícones primários */
    --icon-muted: var(--text-muted);                 /* Ícones secundários */
    --icon-white: var(--text-white);                 /* Ícones brancos */
    
    /* ========================================
       TRANSIÇÕES
       Velocidades de animação
       ======================================== */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    /* ========================================
       OPACIDADES
       Níveis de transparência comuns
       ======================================== */
    --opacity-disabled: 0.5;             /* Elementos desativados */
    --opacity-muted: 0.75;               /* Elementos secundários */
    --opacity-hover: 1;                  /* Elementos ao passar o mouse */
}

/* ========================================
   TEMA ESCURO (Opcional - para implementação futura)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Descomente para ativar tema escuro automático */
        /*
        --bg-white: #1a202c;
        --bg-light: #2d3748;
        --text-dark: #f7fafc;
        --text-gray: #e2e8f0;
        --text-muted: #cbd5e0;
        */
    }
}

/* ========================================
   NOTAS DE USO:
   
   1. Para mudar a cor principal do site:
      Altere --color-primary-start e --color-primary-end
   
   2. Para mudar a cor secundária (rosa):
      Altere --color-secondary-start e --color-secondary-end
   
   3. Para mudar cores de sucesso/info (azul claro):
      Altere --color-success-start e --color-success-end
   
   4. Para mudar cores escuras (footer, hero):
      Altere --color-dark-start e --color-dark-end
   
   5. Todas as páginas herdam automaticamente estas cores
   
   6. Para criar um novo tema, duplique este arquivo
      e altere apenas os valores das variáveis
   ======================================== */