:root {
    --gold: #cda052;
    --gold-light: #e5c083;
    --gold-dark: #a67c37;
    --cream: #FAF9F6;
    --devil-red: #8B0000;
}

body {
    background-color: var(--cream);
    background-image: radial-gradient(circle at 50% 50%, rgba(205, 160, 82, 0.05) 0%, transparent 70%);
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

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

.bg-gold-dark {
    background-color: var(--gold-dark);
}

.bg-gold-light {
    background-color: var(--gold-light);
}

.text-gold {
    color: var(--gold);
}

.text-gold-dark {
    color: var(--gold-dark);
}

.text-devil-red {
    color: var(--devil-red);
}

.border-gold {
    border-color: var(--gold);
}

.border-gold-light {
    border-color: var(--gold-light);
}

.bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}

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

/* Custom transitions */
input, button {
    transition: all 0.3s ease;
}

/* Custom states for the devil/angel selection */
.peer:checked + div {
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}