/* Magic Fridge — shared site theme (aligned with lib/ui/noir_tokens.dart) */

:root {
  --mf-surface: #FDFCF9;
  --mf-surface-mid: #F8F7F4;
  --mf-primary: #E05A1E;
  --mf-primary-dark: #C75B40;
  --mf-primary-light: #FAB5A4;
  --mf-secondary: #5A8F9E;
  --mf-ink: #1F1E1C;
  --mf-ink-soft: #6B6A67;
  --mf-ink-faint: #9B9996;
  --mf-ink-headline: #78350F;
  --mf-cream-warm: #FFF4D2;
}

html { scroll-padding-top: 4rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { touch-action: manipulation; }
[x-cloak] { display: none !important; }

.px-safe {
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .px-safe {
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
  }
}

.mf-bg-hero {
  position: relative;
  overflow: hidden;
}
.mf-bg-hero::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 8% 85%, rgba(255, 159, 41, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 15%, rgba(255, 217, 61, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 75% 80%, rgba(224, 90, 30, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--mf-surface) 0%, var(--mf-cream-warm) 100%);
  z-index: 0;
}
.mf-bg-hero > * { position: relative; z-index: 1; }

.mf-nav {
  background: rgba(253, 252, 249, 0.92);
  border-color: #E0DED9;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
}
.store-badge img {
  height: 100%;
  width: auto;
  display: block;
}
.store-badge--sm { height: 2.25rem; }
.store-badge--md { height: 2.5rem; }
.store-badge--lg { height: 3.25rem; }
.store-badge--xl { height: 3.5rem; }

#sticky-dl {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(253, 252, 249, 0.96);
  border-top: 1px solid #E0DED9;
}
#sticky-dl.visible { transform: translateY(0); }