/* ========================================
   PERSONALIZAÇÃO DE CORES E ESTILOS
   Substitua os valores de exemplo pelos seus
   ======================================== */

/* --- 1. Temas: Claro e Escuro --- */

/* Tema Claro (padrão) */
body {
    /* Cores principais */
    --default-logo-height: 42px;
    --body-bg-color: #f8f9fa;          /* Cor de fundo da página */
    --body-text-color: #212529;        /* Cor do texto principal */

    /* Cabeçalho e Navegação */
    --header-bg-color: #ffffff;        /* Fundo do cabeçalho */
    --header-border-color: #dee2e6;    /* Cor da borda inferior do cabeçalho */
    --nav-link-color: #495057;         /* Cor dos links de navegação */
    --nav-link-hover-color: #007bff;   /* Cor dos links ao passar o mouse */

    /* Itens de Mídia */
    --item-title-text-color: #212529;  /* Cor do título dos vídeos */
    --item-meta-text-color: #6c757d;   /* Cor das metainformações (autor, data) */
    --item-thumb-bg-color: #e9ecef;    /* Cor de fundo das thumbnails */
}

/* Tema Escuro */
body.dark_theme {
    /* Cores principais */
    --body-bg-color: #121212;          /* Fundo da página no tema escuro */
    --body-text-color: #e9ecef;        /* Texto no tema escuro */

    /* Cabeçalho e Navegação */
    --header-bg-color: #272727;        /* Fundo do cabeçalho no tema escuro */
    --header-border-color: #343a40;
    --nav-link-color: #ced4da;
    --nav-link-hover-color: #66b0ff;

    /* Itens de Mídia */
    --item-title-text-color: #f8f9fa;
    --item-meta-text-color: #adb5bd;
    --item-thumb-bg-color: #2b2b2b;
}

/* --- 2. Personalização de Fontes (Opcional) --- */

/* Exemplo para usar uma fonte personalizada */
/*
@import url('https://fonts.googleapis.com/css2?family=Sua+Fonte&display=swap');

body {
    font-family: 'Sua Fonte', sans-serif;
}
*/

/* --- 3. Estilos Adicionais (Opcional) --- */

/* Exemplo para adicionar uma borda ou sombra a elementos específicos */
/*
.card, .media-item {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
*/