/* @import "tailwindcss"; */

@theme {
    --color-cheesy-primary: #5e1c26;
    --color-cheesy-secondary: #e67e22;
    --color-cheesy-cream: #fffac2;
    --color-cheesy-success: #27ae60;
    --color-cheesy-dark: #2c3e50;
    --color-cheesy-light: #f8f9fa;

    --font-bebas: "Bebas Neue", cursive;
    --font-montserrat: Montserrat, sans-serif;
}

/* Note: @apply only works with a tailwind compiler. 
   Removing these since we are serving raw CSS to the browser via Live Server. 
   Body opacity is already handled in base.css */
/* 
@layer base {
    body {
        opacity: 0; 
        transition: opacity 600ms ease-in-out;
    }

    body.loaded {
        opacity: 1;
    }

    body.is-leaving {
        opacity: 0;
    }
}

@layer components {
    .btn-cheesy {
        padding: 0.5rem 1rem;
        background-color: var(--color-cheesy-primary);
        color: var(--color-cheesy-cream);
        border-radius: 0.75rem;
        font-weight: bold;
    }
}
*/