@layer base {
    :root {
        --primary: #c00000;
        --warm-off-white: #fdfaf7;
        --warm-neutral: #f4f1ee;
        --warm-gray-mid: #e5e1dc;
        --surface-dark: #1a1a1a;
        --background-dark: #111111;
    }
}

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-gradient {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/hero.webp');
    background-size: cover;
    background-position: center;
}

.chess-gradient {
    background: linear-gradient(rgba(17, 17, 17, 0.92), rgba(17, 17, 17, 0.92)), url('../images/chess-bg.webp');
    background-size: cover;
    background-position: center;
}

.card-shadow-premium {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}

.card-shadow-premium-hover:hover {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
}