@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700;800&display=swap');



:root {

    /* v2.0 Industrial Palette */

    --primary-blue: #699BA5;

    /* Teal: rgb(105, 155, 165) */

    --primary-dark: #507882;

    /* Darker Teal */

    --secondary-indigo: rgb(52, 85, 93);

    /* Dark Teal: rgb(52, 85, 93) */

    --eco-green: #2ECC71;

    --eco-dark: #27AE60;

    --text-main: #111827;

    /* Gray 900 */

    --text-muted: #4B5563;

    /* Gray 600 */

    --bg-light: #F9FAFB;

    /* Gray 50 */

}



/* Minimal overrides - Tailwind handles the rest */

body {

    font-family: 'Inter', sans-serif;

    -webkit-font-smoothing: antialiased;

    background-color: var(--bg-light);

    color: var(--text-main);

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: 'Outfit', sans-serif;

}



/* Utilities for solid consistency if Tailwind classes aren't enough */

.text-primary-blue {

    color: var(--primary-blue);

}



.bg-primary-blue {

    background-color: var(--primary-blue);

}



.text-eco-green {

    color: var(--eco-green);

}



.bg-eco-green {

    background-color: var(--eco-green);

}



/* Custom Scrollbar for Bento feel */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: #c1c1c1;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #a8a8a8;

}



/* Animations that might be cleaner in CSS than Tailwind classes for complex triggers */

.fade-up {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.fade-up.visible {

    opacity: 1;

    transform: translateY(0);

}