/* LIVEN — only what Tailwind v4 (CDN) cannot express. Everything else lives in utility classes. */

/* Layout: LIVEN Foodbar — sunlit ivory and warm concrete pages, espresso slabs, brushed-steel accents, photography full-bleed. */
:root {
  --ivory: #F5F1EA;
  --paper: #FBF8F3;
  --carbon: #1F1C19;
  --slate: #2B2723;
  --slate-2: #1E1B18;
  --arch: #7A6A5C;
  --orange: #B9693F;
  --sky: #D9C7AE;
  --concrete: #CFC6B8;
  --steel: #A9A8A4;
  --line: rgba(31, 28, 25, .12);
  --line-d: rgba(245, 241, 234, .16);
  /* flavour colours, sampled from the approved cans — never change */
  --cherry: #9B2335;
  --mango: #D9922B;
  --lime: #4F8A3C;
  --acai: #6A3A6E;
  --peach: #E0765A;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--ivory); color: var(--carbon); font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; }
::selection { background: var(--orange); color: #fff; }

/* Lenis smooth-scroll requirements (library contract) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Film grain over upscaled photography: hides softness, adds editorial texture. Needs an SVG data URI. */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Outlined display type — no Tailwind utility for text-stroke */
.text-outline { color: transparent; -webkit-text-stroke: 1px currentColor; }
.text-outline-ivory { color: transparent; -webkit-text-stroke: 1px rgba(244, 241, 235, .55); }

/* Hidden scrollbar for the swipe carousel */
.no-bar { scrollbar-width: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* Keyframes (Tailwind arbitrary animate-[] needs them declared) */
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(220%); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes caustics { 0% { transform: scale(1.15) translate(0, 0); } 50% { transform: scale(1.22) translate(-2%, 1.5%); } 100% { transform: scale(1.15) translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}