:root {
    /* Cores Primárias (Identidade Visual da Marca Kong) */
    --kong-yellow: #FFC700;         /* Amarelo vibrante de destaque */
    --kong-yellow-hover: #E5B200;   /* Amarelo para estado hover/clique */
    --kong-yellow-glow: rgba(255, 199, 0, 0.15); /* Brilhos e seletores */

    /* Fundo e Superfícies (Dark Mode Profissional) */
    --kong-black: #0D0D0E;          /* Fundo principal da página */
    --kong-surface: #18181B;        /* Seções alternadas e Navbar */
    --kong-card: #202024;           /* Fundo dos formulários e cards */
    --kong-border: #2E2E35;         /* Bordas sutis de divisão */

    /* Tipografia e Textos */
    --kong-text-primary: #FFFFFF;   /* Títulos e dados em destaque */
    --kong-text-secondary: #9CA3AF; /* Parágrafos e descrições */
    --kong-text-muted: #6B7280;     /* Rodapé e notas secundárias */

    /* Suporte e Ações Externas */
    --kong-whatsapp: #25D366;
    --kong-whatsapp-hover: #20BA59;
}

/* Classes utilitárias puras (caso queira usar fora do Tailwind) */
.bg-kong-main { background-color: var(--kong-black); }
.bg-kong-surface { background-color: var(--kong-surface); }
.bg-kong-card { background-color: var(--kong-card); }
.border-kong { border-color: var(--kong-border); }
.text-kong-yellow { color: var(--kong-yellow); }
.bg-kong-yellow { background-color: var(--kong-yellow); }

/* Personalização da barra de rolagem para combinar com o tema */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--kong-black);
}
::-webkit-scrollbar-thumb {
    background: var(--kong-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--kong-yellow);
}