/* ==========================================================================
   Feifan v2 — Premium Ceramic Sanitary Ware UI
   Design System: Tailwind utilities + custom serif display
   ========================================================================== */

:root {
    --color-stone-50: #fafaf9;
    --color-stone-100: #f5f5f4;
    --color-stone-200: #e7e5e4;
    --color-stone-300: #d6d3d1;
    --color-stone-400: #a8a29e;
    --color-stone-500: #78716c;
    --color-stone-600: #57534e;
    --color-stone-700: #44403c;
    --color-stone-800: #292524;
    --color-stone-900: #1c1917;
    --color-stone-950: #0c0a09;
    --color-amber-400: #fbbf24;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.005em;
}

.font-display {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.015em;
}

.italic { font-style: italic; }

/* Selection */
::selection {
    background-color: #b45309;
    color: #fafaf9;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f5f5f4; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* Hero gradient overlay */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* Aspect ratio fallback */
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.aspect-square { aspect-ratio: 1 / 1; }

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

img[src*="unsplash"]:not([src$=".jpg"]):not([src$=".png"]) {
    background: linear-gradient(135deg, #d6d3d1, #a8a29e);
}

/* Refined button base */
button, a {
    -webkit-tap-highlight-color: transparent;
}

/* Mobile menu trigger */
@media (max-width: 1024px) {
    .lg\:flex { display: none !important; }
}

/* Print clean */
@media print {
    .fixed, header.sticky, footer { display: none !important; }
}

/* Animation keyframes */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.8s ease-out; }

/* Hover lift on cards */
.hover-lift {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-4px);
}