/**
 * ============================================================
 * THEME VARS - Variáveis CSS Centralizadas
 * ============================================================
 * Este arquivo define TODAS as cores e tokens visuais do tema.
 *
 * Para trocar as cores do campeonato, edite APENAS este arquivo.
 * Ou, se usar o theme.config.php (PHP), os valores aqui
 * servem de fallback quando o PHP não sobrescrever.
 *
 * NOMENCLATURA:
 *   --theme-primary    = cor principal da marca (ex: azul, verde, etc.)
 *   --theme-accent     = cor de destaque/ação (ex: vermelho, laranja, etc.)
 *
 * NÃO edite os arquivos mobile-first.css, reset.css ou style.css
 * para mudar cores - tudo deve passar por aqui.
 * ============================================================
 */

:root {
    /* ════════════════════════════════════════════
       COR PRIMÁRIA - Identidade principal do tema
       ════════════════════════════════════════════ */

    --theme-primary:        #292C61;   /* Cor principal - edite aqui */
    --theme-primary-rgb:    41, 44, 97;
    --theme-primary-dark:   #1f2249;   /* ~20% mais escuro */
    --theme-primary-light:  #4a4f8a;   /* ~20% mais claro */

    /* ════════════════════════════════════════════
       COR DE ACENTO - Botões, links, destaques
       ════════════════════════════════════════════ */

    --theme-accent:         #E42D2F;   /* Cor de acento - edite aqui */
    --theme-accent-rgb:     228, 45, 47;
    --theme-accent-dark:    #A01B18;   /* hover/active */
    --theme-accent-light:   #ff5a5f;   /* versão clara */
    --theme-accent-medium:  #C62828;   /* tom intermediário */
    --theme-accent-bright:  #FF5252;   /* tom vibrante */

    /* Variante extra: tom muito escuro da primária (gradients escuros) */
    --theme-primary-xdark:  #1a1f3a;

    /* ════════════════════════════════════════════
       CORES NEUTRAS
       ════════════════════════════════════════════ */

    --theme-gray:           #2C2C2C;
    --theme-gray-medium:    #666666;
    --theme-gray-light:     #F8F9FA;
    --theme-white:          #FFFFFF;
    --theme-dark-header:    #15151F;   /* Fundo do header ao rolar */

    /* ════════════════════════════════════════════
       CORES BASE (backgrounds, surfaces)
       ════════════════════════════════════════════ */

    --bg:                   #F8F9FB;
    --bg-2:                 #FFFFFF;
    --surface:              #FFFFFF;
    --surface-2:            #F3F4F7;
    --stroke:               rgba(0, 0, 0, 0.08);

    /* ════════════════════════════════════════════
       TIPOGRAFIA
       ════════════════════════════════════════════ */

    --text:                 rgba(0, 0, 0, 0.88);
    --text-muted:           rgba(0, 0, 0, 0.62);
    --text-faint:           rgba(0, 0, 0, 0.45);

    /* ════════════════════════════════════════════
       PODIUM / RANKING (não mudar sem motivo)
       ════════════════════════════════════════════ */

    --f1-gold:              #D4AF37;
    --f1-silver:            #B8B8B8;
    --f1-bronze:            #C77B30;
    --f1-green:             #10B981;

    /* ════════════════════════════════════════════
       GRADIENTES - Gerados a partir das cores acima
       ════════════════════════════════════════════ */

    --gradient-primary:     linear-gradient(135deg, var(--theme-primary-light) 0%, var(--theme-primary) 100%);
    --gradient-accent:      linear-gradient(135deg, var(--theme-accent-bright) 0%, var(--theme-accent) 100%);
    --gradient-accent-rev:  linear-gradient(135deg, var(--theme-accent-medium) 0%, var(--theme-accent) 100%);
    --gradient-card:        linear-gradient(145deg, #FFFFFF 0%, #F8F9FA 100%);
    --gradient-dark:        linear-gradient(145deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%);
    --gradient-hero:        linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%);
    --gradient-dark-hero:   linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-xdark) 100%);

    /* ════════════════════════════════════════════
       SOMBRAS
       ════════════════════════════════════════════ */

    --shadow:               0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-heavy:         0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md:            0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:            0 8px 16px rgba(0, 0, 0, 0.10);
    --shadow-accent:        0 4px 20px rgba(var(--theme-accent-rgb), 0.4);

    /* ════════════════════════════════════════════
       LAYOUT
       ════════════════════════════════════════════ */

    --radius:               12px;
    --maxw:                 1240px;
    --pad:                  20px;

    /* ════════════════════════════════════════════
       TIPOGRAFIA (fontes)
       ════════════════════════════════════════════ */

    --font-title:           'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:            'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ════════════════════════════════════════════
       ANIMAÇÕES
       ════════════════════════════════════════════ */

    --ease-smooth:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:          cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-race:            cubic-bezier(0.85, 0, 0.15, 1);

    /* ════════════════════════════════════════════
       SAFE AREAS (iOS)
       ════════════════════════════════════════════ */

    --safe-top:             env(safe-area-inset-top, 0);
    --safe-bottom:          env(safe-area-inset-bottom, 0);
    --safe-left:            env(safe-area-inset-left, 0);
    --safe-right:           env(safe-area-inset-right, 0);
}