:root {
  --background: 34 46% 93%;
  --foreground: 22 48% 10%;
  --primary: 31 82% 44%;
  --primary-foreground: 36 70% 96%;
  --secondary: 28 50% 20%;
  --secondary-foreground: 36 70% 96%;
  --muted: 34 25% 82%;
  --muted-foreground: 24 20% 35%;
  --destructive: 4 72% 48%;
  --destructive-foreground: 36 70% 96%;
  --border: 31 28% 70%;
  --card: 36 58% 89%;
  --shadow-sm: 0 8px 18px rgba(42, 24, 12, .12);
  --shadow-md: 0 18px 45px rgba(42, 24, 12, .2);
  --shadow-lg: 0 28px 80px rgba(42, 24, 12, .32);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
.dark {
  --background: 20 48% 7%;
  --foreground: 38 62% 92%;
  --primary: 36 88% 58%;
  --primary-foreground: 20 48% 8%;
  --secondary: 25 44% 17%;
  --secondary-foreground: 38 62% 92%;
  --muted: 24 30% 18%;
  --muted-foreground: 34 25% 72%;
  --destructive: 4 72% 55%;
  --destructive-foreground: 36 70% 96%;
  --border: 28 25% 28%;
  --card: 22 43% 11%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
button, a, input, textarea, select { touch-action: manipulation; }
input, textarea, select { font-size: max(16px, 1rem); }
.glass { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--shadow-md); }
.coffee-hero { background: radial-gradient(circle at 20% 20%, rgba(212,132,37,.42), transparent 30%), radial-gradient(circle at 80% 30%, rgba(255,233,184,.28), transparent 26%), linear-gradient(135deg, #160b07 0%, #352014 52%, #8a541c 100%); }
.coffee-cup { position: relative; width: 138px; height: 108px; border-radius: 0 0 44px 44px; background: linear-gradient(135deg, #f7e6c9, #b86c2b); box-shadow: inset 0 -18px 32px rgba(54,25,9,.35), 0 24px 60px rgba(0,0,0,.35); }
.coffee-cup:after { content: ""; position: absolute; right: -38px; top: 24px; width: 54px; height: 48px; border: 12px solid #c77a33; border-left: 0; border-radius: 0 30px 30px 0; }
.steam { position: absolute; top: -84px; left: 26px; width: 18px; height: 72px; border-radius: 999px; background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.8)); filter: blur(7px); animation: steam 2.6s infinite ease-in-out; }
.steam.s2 { left: 60px; animation-delay: .45s; height: 86px; }
.steam.s3 { left: 92px; animation-delay: .9s; height: 68px; }
@keyframes steam { 0% { transform: translateY(16px) scale(.72); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-28px) scale(1.15); opacity: 0; } }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.glow-btn { box-shadow: 0 0 0 rgba(220, 146, 46, 0); transition: var(--transition-smooth); }
.glow-btn:hover { box-shadow: 0 0 38px rgba(220, 146, 46, .62); transform: translateY(-2px); }
.card-hover { transition: var(--transition-smooth); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.particle { position: absolute; border-radius: 999px; background: rgba(245, 202, 132, .34); animation: drift 8s infinite linear; }
@keyframes drift { from { transform: translateY(20px); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(-120px); opacity: 0; } }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0,0,0,.78); padding: 24px; }
.bottom-safe { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.top-safe { padding-top: env(safe-area-inset-top); }