/* Tailwind configuration and Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Tailwind config is typically handled by the script in the HTML, 
   but we can define the CSS variables here for easier reuse. */

:root {
    --primary: #cf6317;
    --background-light: #f8f7f6;
    --background-dark: #211811;
    --sand-light: #fdfbf7;
    --sand-muted: #e5dfd9;
    --zen-sand: #f4f2f0;
    --zen-brown: #887263;
    --zen-dark: #181411;
    --desert-accent: #887263;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--background-light);
    color: var(--zen-dark);
    transition: background-color 0.3s, color 0.3s;
}

.dark body {
    background-color: var(--background-dark);
    color: white;
}

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

.sans-price {
    font-family: 'Manrope', sans-serif;
}

.buffer-time {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(207, 99, 23, 0.05) 5px, rgba(207, 99, 23, 0.05) 10px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}