/* Custom Styles for Cafe Tu Do */

/* Color Variables */
:root {
    --color-mint-50: #f0fdfa;
    --color-mint-100: #ccfbf1;
    --color-mint-200: #99f6e4;
    --color-mint-300: #5eead4;
    --color-mint-400: #2dd4bf;
    --color-mint-500: #14b8a6;
    --color-mint-600: #0d9488;
    --color-mint-700: #0f766e;
    --color-mint-800: #115e59;
    --color-mint-900: #134e4a;
    
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-stone-50: #fafaf9;
    --color-stone-100: #f5f5f4;
    --color-stone-200: #e7e5e4;
}

/* Tailwind Config Override */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: 'Lato', sans-serif;
    }
    
    h1, h2, h3, h4, .font-serif {
        font-family: 'Cormorant Garamond', serif;
    }
}

@layer components {
    /* Smooth fade-in animation for scroll reveal */
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--color-stone-100);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--color-mint-600);
        border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-mint-700);
    }
}

@layer utilities {
    /* Text shadow for better readability on images */
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-serif {
        font-size: 2rem;
    }
    
    .reveal {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print styles */
@media print {
    nav, footer, .no-print {
        display: none;
    }
}