/* ==========================================================================
   1. IMPORTAÇÃO DE FONTES E CONFIGURAÇÕES GERAIS
   ========================================================================== */

:root {
    --primary-dark: #1a1a1a;     /* Cinza escuro de fundo padrão do terminal */
    --secondary-dark: #2b2b2b;   /* 🌟 ATUALIZADO: O tom de cinza carvão que você escolheu */
    --accent-green: #00ff00;     /* Verde puro clássico de monitor CRT */
    --font-sans: 'VT323', monospace;
}

html {
    scroll-behavior: smooth;
    background-color: var(--primary-dark);
}

/* Customização de scrollbar integrada ao tema verde */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--primary-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-green);
}

/* ==========================================================================
   2. TIPOGRAFIA RETRO E TEXTO DE MONITOR
   ========================================================================== */

/* Fonte pixel quadrada para Títulos e botões principais */
.font-pixel {
    font-family: 'Press Start 2P', monospace !important;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

/* 🌟 CORREÇÃO DE OURO: Adicionado 'a', 'li', 'button' e 'i'. 
   Agora tudo no site herda a fonte pixel de terminal e a cor verde CRT por padrão. */
.font-sans, p, label, input, textarea, span, a, li, button, i {
    font-family: var(--font-sans) !important;
    font-size: 1.35rem; 
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 🛡️ BLINDAGEM: Se você aplicar classes de texto escuro do Tailwind, 
   elas ganham prioridade absoluta para o texto não sumir no fundo verde */
.text-primary-dark, .text-primary-dark *,
button .text-primary-dark, a .text-primary-dark { 
    color: var(--primary-dark) !important; 
}
.text-black, .text-black *, 
button .text-black, a .text-black { 
    color: #000000 !important; 
}
.text-white, .text-white * { 
    color: #00ff00 
}

/* ==========================================================================
   3. A ANIMAÇÃO DOS BLOCOS (BOX STYLE RETRO)
   ========================================================================== */

/* Caixa estilo pixel art: borda sólida com sombra rígida sem desfoque */
.box-style {
    border: 2px solid var(--accent-green);
    background-color: #000000;
    box-shadow: 4px 4px 0px 0px var(--accent-green);
    position: relative;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Animaçãozinha ao passar o mouse */
.box-style:hover:not(.flip-card-front):not(.flip-card-back) {
    transform: translate(-2px, -2px);
    border-color: #ffffff;
    box-shadow: 6px 6px 0px 0px #ffffff;
}

/* Aplicação de bordas arredondadas suaves */
.rounded-lg {
    border-radius: 8px !important;
}

/* Ajustes para os botões maciços de envio/ação */
button[type="submit"], .bg-accent-green {
    background-color: var(--accent-green) !important;
    border: 2px solid var(--accent-green);
    transition: all 0.15s ease-in-out;
}

/* Garante texto escuro nos botões verdes */
button[type="submit"], .bg-accent-green, .bg-accent-green * {
    color: #000000;
}

button[type="submit"]:hover, .bg-accent-green:hover {
    background-color: #ffffff !important;
    border-color: #ffffff;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px 0px var(--accent-green);
}

/* Quando passa o mouse no botão verde, o texto dele continua preto por cima do fundo branco */
button[type="submit"]:hover, .bg-accent-green:hover, .bg-accent-green:hover * {
    color: #000000 !important;
}

/* ==========================================================================
   4. COMPONENTES, SLIDER 3D E BLINDAGEM DO MENU
   ========================================================================== */

/* Garante que o cabeçalho seja uma parede sólida opaca no topo do site */
header, header nav {
    background-color: var(--primary-dark) !important;
    isolation: isolate;
}

.perspective {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.my-rotate-y-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.group:hover .group-hover\:my-rotate-y-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Remove a barra de navegação feia do carrossel mantendo o scroll nativo ativo */
#projects-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#projects-carousel::-webkit-scrollbar {
    display: none;
}

button[type="submit"], .bg-accent-green {
    background-color: var(--accent-green) !important;
    border: 2px solid var(--accent-green); /* <-- Sem !important */
    transition: all 0.15s ease-in-out;
}