<style>
/* ==========================================
LeafBound — MVP styles (no Tailwind build)
Keep this file tiny; just house styles that
aren't ergonomic as utility classes.
========================================== */


:root{
/* brand tokens (mirrors Tailwind emerald-ish) */
--leaf-50:#effdf6; --leaf-100:#d7f9e8; --leaf-200:#b0f1d2; --leaf-300:#7be4b5;
--leaf-400:#47d495; --leaf-500:#19bf75; --leaf-600:#0ea35a; --leaf-700:#0a8448;
--leaf-800:#0b683a; --leaf-900:#0a5732;
}


/* Subtle noise and glass helpers */
.noise{
background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 8px 8px;
}
.glass{ backdrop-filter: blur(8px); background: rgba(255,255,255,.06); }


/* Card hover polish */
.card{ transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }


/* Soft shadow utility (matches design) */
.shadow-soft{ box-shadow: 0 10px 30px -12px rgba(0,0,0,.25); }


/* Image rounding ring helper (for mock screenshots) */
.img-frame{ border-radius: 0.75rem; box-shadow: 0 1px 0 0 rgba(255,255,255,.06) inset; }


/* Fade mask if you want to vignette any big background blobs */
.mask-fade{ -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent); mask-image: linear-gradient(to bottom, black 70%, transparent); }


/* Reduce motion preference: tone down transitions for accessibility */
@media (prefers-reduced-motion: reduce){
.card, .shadow-soft{ transition: none !important; }
}
</style>