/* ==================== VARIÁVEIS CSS GLOBAIS ==================== */
/*
 * Arquivo centralizado para todas as variáveis de cores, espaçamentos,
 * tamanhos e outras propriedades reutilizáveis do projeto.
 */

:root {
    /* ==================== CORES - TEMA ESCURO ==================== */
    
    /* Backgrounds */
    --bg-primary: #0a0a0a;          /* Fundo principal da aplicação */
    --bg-secondary: #111111;        /* Fundo secundário (content container) */
    --bg-elevated: #1a1a1a;         /* Fundo elevado (cards, containers) */
    
    /* Textos */
    --text-primary: #ffffff;        /* Texto principal */
    --text-secondary: #888888;      /* Texto secundário/desabilitado */
    
    /* Accent e Estados */
    --accent: #ffffff;              /* Cor de destaque */
    --border: #222222;              /* Bordas */
    --hover: rgba(255, 255, 255, 0.05);   /* Estado hover */
    --active: rgba(255, 255, 255, 0.1);   /* Estado ativo */
    
    /* ==================== DIMENSÕES DA SIDEBAR ==================== */
    
    --sidebar-width: 240px;         /* Largura da sidebar expandida */
    --sidebar-collapsed: 72px;      /* Largura da sidebar colapsada */
    --header-height: 60px;          /* Altura do header mobile */
    
    /* ==================== SISTEMA DE ESPAÇAMENTO ==================== */
    /*
     * Sistema de padding e margin personalizado
     * Ajuste conforme necessário para cada área da aplicação
     */
    
    --content-padding: 40px;        /* Padding interno do container de páginas */
    --content-border-radius: 24px;  /* Border radius do container de páginas */
    
    /* ==================== TRANSIÇÕES E ANIMAÇÕES ==================== */
    
    --transition-speed: 0.3s;       /* Velocidade padrão de transições */
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);  /* Curva de easing */
}