/* ========================================== */
/* VARIÁVEIS GLOBAIS (TEMA CLARO - PADRÃO)    */
/* ========================================== */
:root {
    /* Cores Neutras (Base Fintech/Stripe - Tons de Slate) */
    --color-bg-base: #f8fafc;       /* Fundo principal da aplicação */
    --color-bg-surface: #ffffff;    /* Fundo de cards e painéis */
    --color-text-primary: #0f172a;  /* Texto principal (quase preto) */
    --color-text-secondary: #64748b;/* Texto secundário (cinza médio) */
    --color-border: #e2e8f0;        /* Bordas sutis */
    
    /* Cor da Marca (Brand - Usada no Login e Dashboard) */
    --color-brand-primary: #2563eb; /* Azul vibrante */
    --color-brand-hover: #1d4ed8;   /* Azul mais escuro para hover */
    --color-brand-light: #eff6ff;   /* Azul bem claro para fundos */

    /* Temas Dinâmicos por Módulo */
    /* 1. Mercado (Azul/Cinza - Analítico) */
    --theme-mercado-primary: #3b82f6;
    --theme-mercado-light: #eff6ff;
    
    /* 2. Simulação (Laranja/Âmbar - Ação/Estratégia) */
    --theme-simulacao-primary: #f59e0b;
    --theme-simulacao-light: #fffbeb;
    
    /* 3. Realizado (Verde - Sucesso/Lucro) */
    --theme-realizado-primary: #10b981;
    --theme-realizado-light: #ecfdf5;
    
    /* 4. Pós-Mortem (Roxo/Violeta - Análise/Reflexão) */
    --theme-posmortem-primary: #8b5cf6;
    --theme-posmortem-light: #f5f3ff;

    /* Espaçamentos e Bordas (Consistência Visual) */
    --radius-sm: 0.375rem;  /* 6px - Botões e inputs pequenos */
    --radius-md: 0.5rem;    /* 8px - Cards e modais */
    --radius-lg: 0.75rem;   /* 12px - Containers grandes */
    --radius-xl: 1rem;      /* 16px - Elementos de destaque */
}

/* ========================================== */
/* VARIÁVEIS DO TEMA ESCURO (DARK MODE)       */
/* ========================================== */
.dark {
    /* Cores Neutras (Adaptadas para fundo escuro) */
    --color-bg-base: #0f172a;       /* Fundo principal escuro */
    --color-bg-surface: #1e293b;    /* Fundo de cards escuro */
    --color-text-primary: #f8fafc;  /* Texto principal claro */
    --color-text-secondary: #94a3b8;/* Texto secundário claro */
    --color-border: #334155;        /* Bordas sutis escuras */
}

/* ========================================== */
/* RESETS E ESTILOS BASE                      */
/* ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    /* Transição suave ao alternar entre tema claro e escuro */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* ========================================== */
/* UTILITÁRIOS DE TEMA (PARA JAVASCRIPT)      */
/* ========================================== */
/* Estas classes serão aplicadas via JS quando o usuário trocar de módulo */

.theme-mercado {
    --color-brand-primary: var(--theme-mercado-primary);
    --color-brand-light: var(--theme-mercado-light);
}

.theme-simulacao {
    --color-brand-primary: var(--theme-simulacao-primary);
    --color-brand-light: var(--theme-simulacao-light);
}

.theme-realizado {
    --color-brand-primary: var(--theme-realizado-primary);
    --color-brand-light: var(--theme-realizado-light);
}

.theme-posmortem {
    --color-brand-primary: var(--theme-posmortem-primary);
    --color-brand-light: var(--theme-posmortem-light);
}