/* 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: only light;   /* Chrome Android / Samsung Internet must not auto-darken the site */
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* the page is locked to the screen width: it never slides sideways on a phone (clip keeps sticky sections working; hidden = fallback for old Safari) */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
/* sideways carousels: a swipe stays in the carousel (no browser back-swipe, no page bounce) */
.overflow-x-auto { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
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");
}

@media (max-width: 767px) { .grain::after { display: none; } }

/* 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; }
}

/* v2 (drinksom-style test page): mono labels */
:root { --mono: 'DM Mono', ui-monospace, monospace; }

/* Type system, after the brand reveal over water (18 oct.): every title is light, uppercase and widely spaced;
   the "bold half" of a title becomes regular instead of semibold. Unlayered on purpose so it wins over the
   Tailwind utilities written on each heading. v2 (own header, mono labels) keeps its own style. */
body:not([data-own-header]) main :is(h1, h2, h3) {
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.04;
}
body:not([data-own-header]) main :is(h1, h2, h3) :is(.font-semibold, .font-bold, .font-medium) { font-weight: 400; }
/* small spaced labels everywhere get the same airy feel as "Creatine, your way" */
body:not([data-own-header]) main p.uppercase:not(h1 *, h2 *, h3 *) { letter-spacing: max(.3em, 0em); }
/* phones: iOS Safari zooms the page when a field under 16 px gets focus — keep every field at 16 px so the page stays framed */
@media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } }
/* app feel on touch screens (like the Nexus Hub): no grey tap flash, no long-press callout on links/buttons, no accidental double-tap zoom */
@media (pointer: coarse) { a, button { -webkit-touch-callout: none; touch-action: manipulation; } }