@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

:root {
    --color-bg: #f8f5f2;
    --color-text: #333333;
    --color-sage: #7D8C72;
    --color-sage-light: #A3B18A;
    
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(125, 140, 114, 0.1);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

.font-serif { font-family: 'Cormorant Garamond', serif; }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.sage-accent { color: var(--color-sage); }
.bg-sage { background-color: var(--color-sage); }
.border-sage { border-color: var(--color-sage); text-decoration-color: var(--color-sage); }

.chart-bar {
    background: linear-gradient(to top, var(--color-sage), var(--color-sage-light));
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-sage);
    box-shadow: 0 0 8px var(--color-sage);
}

/* Animations */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

.preview-transparent {
    background-image: radial-gradient(#e5e7eb 20%, transparent 20%), radial-gradient(#e5e7eb 20%, transparent 20%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    background-color: transparent;
}

main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) {
  background-color: transparent !important;
}