:root {
    --platform-primary: #d6d6d6;
    --platform-primary-hover: #ababab;
    --platform-primary-light: #ffffff;
    --platform-primary-10: #ffffff;
    --platform-primary-20: #ffffff;
    --platform-header-color: #000000;
    --platform-footer-color: #123800;
    --platform-page-background: #067a00;
    --platform-primary-rgb: 214, 214, 214;
}

/* Cores do Header */
.bg-header-color {
    background-color: var(--platform-header-color);
}

/* Cores do Footer */
.bg-footer-color {
    background-color: var(--platform-footer-color);
}

/* Cor de fundo da página */
.bg-page-background {
    background-color: var(--platform-page-background);
}

/* Botões primários */
.btn-primary {
    background-color: var(--platform-primary);
    border-color: var(--platform-primary);
}

.btn-primary:hover {
    background-color: var(--platform-primary-hover);
    border-color: var(--platform-primary-hover);
}

.winner-highlight {
    background: linear-gradient(45deg, var(--platform-primary), var(--platform-primary-light));
}

/* Elementos de destaque */
.text-platform-primary {
    color: var(--platform-primary);
}

.bg-platform-primary {
    background-color: var(--platform-primary);
}

.border-platform-primary {
    border-color: var(--platform-primary);
}

.bg-platform-primary\/10 {
    background-color: var(--platform-primary-10);
}

.bg-platform-primary\/20 {
    background-color: var(--platform-primary-20);
}

/* Efeitos de hover */
.hover\:bg-platform-primary:hover {
    background-color: var(--platform-primary);
}

.hover\:text-platform-primary:hover {
    color: var(--platform-primary);
}

.hover\:border-platform-primary:hover {
    border-color: var(--platform-primary);
}

.hover\:bg-platform-primary-hover:hover {
    background-color: var(--platform-primary-hover);
}

.hover\:bg-platform-primary\/10:hover {
    background-color: var(--platform-primary-10);
}

/* Focus states */
.focus\:border-platform-primary:focus {
    border-color: var(--platform-primary);
}

.focus\:ring-platform-primary:focus {
    --tw-ring-color: var(--platform-primary);
}

.focus\:ring-platform-primary\/20:focus {
    --tw-ring-color: var(--platform-primary-20);
}

/* Gradientes */
.from-platform-primary {
    --tw-gradient-from: var(--platform-primary);
    --tw-gradient-to: rgb(var(--platform-primary) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-header-color {
    --tw-gradient-from: var(--platform-header-color);
    --tw-gradient-to: rgb(var(--platform-header-color) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-platform-primary {
    --tw-gradient-to: rgb(var(--platform-primary) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--platform-primary), var(--tw-gradient-to);
}

.via-header-color {
    --tw-gradient-to: rgb(var(--platform-header-color) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--platform-header-color), var(--tw-gradient-to);
}

.to-platform-primary {
    --tw-gradient-to: var(--platform-primary);
}

/* Gradiente com opacidade */
.to-platform-primary\/5 {
    --tw-gradient-to: var(--platform-primary);
}

.to-platform-primary\/10 {
    --tw-gradient-to: var(--platform-primary);
}

.to-platform-primary\/20 {
    --tw-gradient-to: var(--platform-primary);
}

/* Gradiente do header */
.to-header-color {
    --tw-gradient-to: var(--platform-header-color);
}

/* Hover border bottom */
.hover\:border-b-platform-primary:hover {
    border-bottom-color: var(--platform-primary);
}

.hover\:border-b-2:hover {
    border-bottom-width: 2px;
}

/* Background gradients */
.bg-gradient-to-br.from-platform-primary.via-platform-primary.to-platform-primary-hover {
    background: linear-gradient(to bottom right, var(--platform-primary), var(--platform-primary), var(--platform-primary-hover));
}

.bg-gradient-to-r.from-platform-primary.to-emerald-600 {
    background: linear-gradient(to right, var(--platform-primary), #059669);
}

/* Gradiente específico para o card */
.scratch-card {
    background: linear-gradient(to bottom, transparent, transparent, rgba(var(--platform-primary-rgb), 0.05));
}

.scratch-card:hover {
    border-bottom: 2px solid var(--platform-primary);
}

/* Ring utilities */
.ring-platform-primary {
    --tw-ring-color: var(--platform-primary);
}

.ring-platform-primary\/20 {
    --tw-ring-color: var(--platform-primary-20);
}