/* CulinaAI shared styles
   Consolidated from the repeated <style> blocks that were duplicated
   inline on every page. Page-specific rules live in each template's
   {% block extra_head %} instead of being copy-pasted everywhere. */

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

body {
    background-color: #FBF6EF; /* Cream */
}

/* Premium Aesthetics & Micro-Interactions */
.hover-float {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.hover-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(163, 56, 0, 0.15);
}
.text-gradient {
    background: linear-gradient(135deg, #a33800 0%, #c64e17 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bento-card {
    background: #ffffff;
    border: 1px solid rgba(224, 192, 181, 0.4);
    box-shadow: 0 4px 20px rgba(42, 33, 28, 0.06);
    border-radius: 1.5rem;
    overflow: hidden;
}
.card-shadow {
    box-shadow: 0px 4px 20px rgba(42, 33, 28, 0.05);
}
.fab-shadow {
    box-shadow: 0px 8px 30px rgba(42, 33, 28, 0.12);
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}