/* assets/css/common.css - Grupo Moli Theme */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    background-color: var(--moli-base, #eee1cb);
    color: var(--moli-text, #2C1E19);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'DM Serif Display', serif;
}

.font-serif {
    font-family: 'DM Serif Display', serif;
}

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

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

::-webkit-scrollbar-track {
    background: var(--moli-base, #eee1cb);
}

::-webkit-scrollbar-thumb {
    background: var(--moli-gold, #926e30);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--moli-text, #2C1E19);
}

/* Custom scrollbar utility */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(146, 110, 48, 0.5);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(146, 110, 48, 0.8);
}

/* Selection */
::selection {
    background: var(--moli-gold, #926e30);
    color: white;
}

/* Links base style */
a {
    transition: all 0.3s ease;
}

/* Button base transitions */
button {
    transition: all 0.3s ease;
}

/* Image lazy load placeholder */
img {
    transition: opacity 0.3s ease;
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--moli-gold, #926e30);
    outline-offset: 2px;
}

/* Hide scrollbar for horizontal scrolling containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* Aspect ratio utilities */
.aspect-4-5 {
    aspect-ratio: 4 / 5;
}

.aspect-3-4 {
    aspect-ratio: 3 / 4;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Safe area padding for mobile */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}