/*coloursandfonts2.css*/

/* Importa as fontes para um visual moderno e robusto */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@400;700&family=Old+Standard+TT:wght@400;700&display=swap');

:root {
    /* Paleta de Cores: Inspirada em metal, alvos e precisão */
    --primary-text-color: #E0E0E0; /* Cinza claro para legibilidade em fundos escuros */
    --secondary-text-color: #B0B0B0; /* Cinza médio para textos secundários */
    --title-color: #FF6B6B; /* Vermelho vibrante de alvo/mira, para títulos impactantes */
    
    --background-gradient-start: #1A1A1D; /* Preto quase absoluto, como um estande de tiro */
    --background-gradient-end: #0F0F10; /* Preto mais profundo */
    
    --table-background: #2C3E50; /* Azul escuro metálico, como aço oxidado */
    --table-shadow-color: rgba(0, 0, 0, 0.4); /* Sombra mais profunda */
    --border-color: #34495E; /* Borda um pouco mais escura que o fundo da tabela */
    
    --header-background: #1C2833; /* Azul bem escuro, quase preto, para o cabeçalho */
    --header-text-color: #FFFFFF; /* Branco puro */
    
    --editable-cell-background: #4A6572; /* Cinza azulado mais claro para células editáveis, remetendo a chumbo */
    --footer-background: #1B262C; /* Azul marinho escuro, robusto */
    
    /* Cores do Teclado Virtual: Mais técnico e funcional */
    --keyboard-background: #0D1B2A; /* Azul petróleo escuro */
    --keyboard-border-color: #2E4053; /* Borda mais definida */
    --keyboard-shadow-color: rgba(0, 0, 0, 0.6);
    
    --button-background: #5DADE2; /* Azul médio/claro, lembra um laser */
    --button-hover-background: #3498DB; /* Azul mais intenso ao passar o mouse */
    --button-active-background: #2874A6; /* Azul profundo ao clicar */
    --button-text-color: #FFFFFF; /* Texto branco */
    
    --clear-button-background: #CB4335; /* Vermelho mais escuro e sóbrio para o DEL */
    --clear-button-hover-background: #B03A2E;

    /* Novas cores para os círculos do alvo */
    --target-circle-outer: rgba(255, 255, 255, 0.1); /* Anel externo translúcido */
    --target-circle-middle: rgba(255, 255, 255, 0.2); /* Anel do meio */
    --target-circle-inner: rgba(255, 255, 255, 0.3); /* Anel interno */
    --target-center: rgba(255, 255, 255, 0.4); /* Centro do alvo */
}

body {
    /* Fontes: Orbitron para títulos impactantes, Roboto Mono para dados precisos, Old Standard TT para um toque clássico */
    font-family: 'Roboto Mono', monospace; /* Fonte monoespaçada para dados, remetendo a displays digitais */
    background: linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));
    color: var(--primary-text-color);
}

/* ... o restante do seu CSS coloursandfonts.css permanece o mesmo ... */

h2 {
    font-family: 'Orbitron', sans-serif; /* Fonte futurista/técnica para títulos */
    color: var(--title-color);
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.7); /* Efeito de brilho sutil como mira */
}

.table-container {
    background: var(--table-background);
    box-shadow: 0 4px 20px var(--table-shadow-color); /* Sombra mais pronunciada */
}

th, td {
    border: 1px solid var(--border-color);
}

th {
    background-color: var(--header-background);
    color: var(--header-text-color);
    font-family: 'Old Standard TT', serif; /* Fonte serifada para um toque clássico e formal */
}

td[contenteditable] {
    background-color: var(--editable-cell-background);
}

tfoot td {
    background-color: var(--footer-background);
    color: var(--header-text-color); /* Usar branco para o texto do rodapé */
}

/* Estilos para o teclado virtual */
#virtual-keyboard {
    background-color: var(--keyboard-background);
    border: 1px solid var(--keyboard-border-color);
    box-shadow: 0 2px 15px var(--keyboard-shadow-color);
}

#virtual-keyboard button {
    background-color: var(--button-background);
    color: var(--button-text-color);
    font-family: 'Roboto Mono', monospace; /* Manter a fonte técnica */
}

#virtual-keyboard button:hover {
    background-color: var(--button-hover-background);
}

#virtual-keyboard button:active {
    background-color: var(--button-active-background);
}

#virtual-keyboard .clear-button {
    background-color: var(--clear-button-background);
    color: var(--button-text-color);
}

#virtual-keyboard .clear-button:hover {
    background-color: var(--clear-button-hover-background);
}