@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: 'EB Garamond', serif;
        scroll-behavior: smooth;
        background-color: #f8f6f1;
    }
    body {
        font-family: 'EB Garamond', serif;
        background-color: #f8f6f1;
        color: #3a3226;
    }
.name-small-caps {
        font-variant: small-caps;
        letter-spacing: 0.05em;
    }
}

/* Apply EB Garamond to all text elements */
p, h1, h2, h3, h4, h5, h6, a, span, li {
    font-family: 'EB Garamond', serif;
}
@layer utilities {
    .font-garamond {
        font-family: 'EB Garamond', serif;
    }
.bg-bone-50 {
        background-color: #f8f6f1;
    }
.bg-bone-100 {
        background-color: #f0ece1;
    }
.bg-bone-200 {
        background-color: #e8e4d9;
    }
    
    .text-bone-50 {
        color: #f8f6f1;
    }
    
    .text-bone-100 {
        color: #f0ece1;
    }
    
    .text-bone-200 {
        color: #e8e4d9;
    }
.bg-charcoal-900 {
        background-color: #2a2723;
        background-image: linear-gradient(to right, rgba(60, 56, 51, 0.2), rgba(42, 39, 35, 0.2));
    }
    .text-charcoal-900 {
        color: #3a3226;
    }
.text-charcoal-800 {
        color: #4a4236;
    }
    
    .text-charcoal-700 {
        color: #5a5246;
    }
    
    .text-charcoal-600 {
        color: #6a6256;
    }
    
    .border-charcoal-200 {
        border-color: #d5d1c9;
    }
    
    .border-bone-300 {
        border-color: #d5d1c9;
    }
}
/* Snake game styles */
#snake-game {
    max-width: 500px;
    margin: 0 auto;
}

#game-canvas {
    display: block;
    margin: 0 auto;
    background-color: #f8f6f1;
}

#game-over {
    background-color: #f0ece1;
    padding: 1rem;
    border-radius: 0.375rem;
}

#leaderboard {
    max-height: 200px;
    overflow-y: auto;
    background-color: #f8f6f1;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #d5d1c9;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f0ece1;
}

::-webkit-scrollbar-thumb {
    background: #3a3226;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a2723;
}