/**
 * Copyright By: DOMMA TI
 * Author: Samy Lima Assi
 * Date: 24/12/2025
 * 
 * Filename: theme.css
 * File function: Custom theme CSS variables for site customization.
 * Updated with new Portal Tucupi branding - Yellow header theme.
 */

/**
 * TucupiCMS - Custom Theme Variables
 * 
 * Este arquivo contém todas as variáveis CSS customizáveis da aplicação.
 * Você pode editar os valores abaixo para personalizar as cores, fontes 
 * e outros aspectos visuais do portal.
 * 
 * INSTRUÇÕES:
 * 1. Edite os valores das variáveis abaixo
 * 2. Salve o arquivo
 * 3. Recarregue a aplicação ou faça deploy para ver as alterações
 */

:root {
    /* =====================================================
   * CORES PRINCIPAIS - NOVO TEMA TUCUPI
   * ===================================================== */

    /* Cor primária - Amarelo Tucupi (header, destaques) */
    --theme-primary-h: 50;
    --theme-primary-s: 98%;
    --theme-primary-l: 53%;
    /* Resultado: #FED00E (amarelo vibrante) */

    /* Cor secundária - Laranja (elementos de apoio) */
    --theme-secondary-h: 33;
    --theme-secondary-s: 97%;
    --theme-secondary-l: 51%;
    /* Resultado: #FB8C00 (laranja) */

    /* Cor de destaque/accent - Marrom escuro (footer, textos importantes) */
    --theme-accent-h: 26;
    --theme-accent-s: 35%;
    --theme-accent-l: 15%;
    /* Resultado: #3E2723 (marrom escuro) */

    /* Cor de alerta/live - Vermelho (badge AO VIVO) */
    --theme-live-h: 0;
    --theme-live-s: 84%;
    --theme-live-l: 60%;
    /* Resultado: Red */

    /* =====================================================
   * CORES DE FUNDO (MODO CLARO)
   * ===================================================== */
    --theme-background-light-h: 210;
    --theme-background-light-s: 20%;
    --theme-background-light-l: 98%;
    /* Resultado: #F9FAFB (cinza claro) */

    --theme-foreground-light-h: 215;
    --theme-foreground-light-s: 28%;
    --theme-foreground-light-l: 17%;
    /* Resultado: #1F2937 (cinza escuro) */

    --theme-card-light-h: 0;
    --theme-card-light-s: 0%;
    --theme-card-light-l: 100%;
    /* Resultado: #FFFFFF (branco) */

    /* =====================================================
   * CORES DE FUNDO (MODO ESCURO)
   * ===================================================== */
    --theme-background-dark-h: 222;
    --theme-background-dark-s: 47%;
    --theme-background-dark-l: 11%;
    /* Resultado: #121212 */

    --theme-foreground-dark-h: 225;
    --theme-foreground-dark-s: 8%;
    --theme-foreground-dark-l: 80%;
    /* Resultado: #E5E7EB */

    --theme-card-dark-h: 222;
    --theme-card-dark-s: 47%;
    --theme-card-dark-l: 15%;
    /* Resultado: #1E1E1E */

    /* =====================================================
   * TIPOGRAFIA
   * ===================================================== */

    /* Fontes (usar nomes de fontes Google Fonts ou do sistema) */
    --theme-font-display: 'Montserrat', sans-serif;
    --theme-font-body: 'Merriweather', serif;

    /* Tamanhos de fonte base */
    --theme-font-size-base: 16px;
    --theme-font-size-sm: 14px;
    --theme-font-size-lg: 18px;
    --theme-font-size-xl: 24px;
    --theme-font-size-2xl: 32px;

    /* =====================================================
   * BRANDING / LOGO
   * ===================================================== */

    /* Nome do portal (exibido no header) */
    --theme-portal-name: 'PORTAL TUCUPI';

    /* Slogan do portal */
    --theme-portal-slogan: 'A NOTÍCIA EM PRIMEIRA MÃO';

    /* Cores do header */
    --theme-header-bg: #FED00E;
    --theme-header-text: #000000;

    /* Cores do texto do logo */
    --theme-logo-text-color: #000000;
    --theme-logo-slogan-color: #333333;

    /* Logo - caminho relativo a partir de /public */
    --theme-logo-path: '/logo.jpeg';

    /* =====================================================
   * BORDAS E ESPAÇAMENTO
   * ===================================================== */
    --theme-border-radius: 0.5rem;
    --theme-border-radius-lg: 1rem;
    --theme-border-radius-xl: 1.5rem;
    --theme-border-radius-2xl: 2rem;

    /* =====================================================
   * SCROLLBAR
   * ===================================================== */
    --theme-scrollbar-width: 8px;
    --theme-scrollbar-thumb-color: #FED00E;
    --theme-scrollbar-track-color: transparent;

    /* =====================================================
   * ANIMAÇÕES
   * ===================================================== */
    --theme-transition-duration: 300ms;
    --theme-marquee-default-speed: 25s;

    /* =====================================================
   * SOMBRAS
   * ===================================================== */
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --theme-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* =====================================================
 * NÃO EDITAR ABAIXO - Aplicação das variáveis
 * ===================================================== */

/* Mapear as variáveis do tema para as variáveis do sistema */
:root {
    /* Aplicar cores primárias */
    --primary: var(--theme-primary-h) var(--theme-primary-s) var(--theme-primary-l);
    --secondary: var(--theme-secondary-h) var(--theme-secondary-s) var(--theme-secondary-l);
    --accent: var(--theme-accent-h) var(--theme-accent-s) var(--theme-accent-l);

    /* Cores de fundo modo claro */
    --background: var(--theme-background-light-h) var(--theme-background-light-s) var(--theme-background-light-l);
    --foreground: var(--theme-foreground-light-h) var(--theme-foreground-light-s) var(--theme-foreground-light-l);
    --card: var(--theme-card-light-h) var(--theme-card-light-s) var(--theme-card-light-l);

    /* Border radius */
    --radius: var(--theme-border-radius);
}

.dark {
    /* Cores de fundo modo escuro */
    --background: var(--theme-background-dark-h) var(--theme-background-dark-s) var(--theme-background-dark-l);
    --foreground: var(--theme-foreground-dark-h) var(--theme-foreground-dark-s) var(--theme-foreground-dark-l);
    --card: var(--theme-card-dark-h) var(--theme-card-dark-s) var(--theme-card-dark-l);
}

/* Scrollbar customizada */
::-webkit-scrollbar {
    width: var(--theme-scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--theme-scrollbar-thumb-color);
    border-radius: 20px;
}

/* Transições */
body {
    transition-duration: var(--theme-transition-duration);
}

/* Animação do Marquee */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee var(--theme-marquee-default-speed) linear infinite;
}

/* Badge AO VIVO animação */
@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse-live {
    animation: pulse-live 2s ease-in-out infinite;
}