@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Geist+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&display=swap');

:root {
    --bg-cream: #f4f4f2;
    --color-ink-dark: #1e2025;
    --color-ink-muted: #5e6470;
}

body {
    background-color: var(--bg-cream) !important;
    background-image: none !important;
    color: var(--color-ink-dark) !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* Typographic System Mapping */
.title-satoshi, h1, h2, h3, h4, h5, h6 {
    font-family: 'Satoshi', sans-serif !important;
}

.text-lora, .font-serif, font-serif {
    font-family: 'Lora', serif !important;
}

.utility-geist, .mono-hud, .font-mono {
    font-family: 'Geist Mono', monospace !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Softened Tactile Container Cards */
.soft-glass-card, .engagement-block, .kinetic-panel {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 1.5rem !important; /* rounded-3xl equivalent */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.soft-glass-card:hover, .engagement-block:hover {
    border-color: rgba(30, 32, 37, 0.25) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

.dark-glass-card {
    background: rgba(26, 28, 33, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.5rem !important;
}

/* Smooth, continuous breathing animation for light cards */
@keyframes floatGentle {
    0%, 100% { transform: translateY(0px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
    50% { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); }
}

/* Slightly offset breathing animation for the dark card variant to break up monotony */
@keyframes floatCounter {
    0%, 100% { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
    50% { transform: translateY(0px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
}

.animate-float-A {
    animation: floatGentle 6s ease-in-out infinite;
}

.animate-float-B {
    animation: floatCounter 6s ease-in-out infinite;
}