:root {
    --color-primary: #12141D;
    --color-secondary: #222831;
    --color-highlight: #D4AF37;
    --color-text: #F0F0F0;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-highlight { background-color: var(--color-highlight); }
.text-primary-text { color: var(--color-primary); }
.text-text { color: var(--color-text); }
.text-highlight { color: var(--color-highlight); }
.border-highlight { border-color: var(--color-highlight); }

#hero {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill="%23222831" fill-opacity="0.1"%3E%3Crect x="0" y="0" width="10" height="10"/%3E%3C/g%3E%3C/svg%3E');
    background-size: 10px;
}

.case-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.case-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.1), 0 10px 10px -5px rgba(212, 175, 55, 0.08);
}

.case-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}