html[data-business-type] { --business-pattern: url("/assets/menu-patterns/restaurant.svg"); }
html[data-business-type=cafe] { --business-pattern: url("/assets/menu-patterns/cafe.svg?v=2"); }
html[data-business-type=roastery] { --business-pattern: url("/assets/menu-patterns/roastery.svg?v=2"); }
html[data-business-type=bakery] { --business-pattern: url("/assets/menu-patterns/bakery.svg"); }

html[data-business-type][data-background] body {
  background-color: color-mix(in srgb, var(--surface) 48%, var(--page-paper)) !important;
  background-image: var(--business-pattern), var(--canvas-texture, none) !important;
  background-size: 220px 190px, var(--canvas-texture-size, auto) !important;
}
html[data-business-type][data-background][data-template=lo2ma] body {
  background: var(--surface) !important;
}
html[data-background=dots] {
  --canvas-texture: radial-gradient(color-mix(in srgb, var(--surface-ink) 7%, transparent) 1px, transparent 1px);
  --canvas-texture-size: 20px 20px;
}
html[data-background=grid] {
  --canvas-texture: linear-gradient(color-mix(in srgb, var(--surface-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-ink) 6%, transparent) 1px, transparent 1px);
  --canvas-texture-size: 32px 32px;
}
html[data-background=stripes] {
  --canvas-texture: repeating-linear-gradient(45deg, transparent 0 25px, color-mix(in srgb, var(--accent) 6%, transparent) 25px 27px);
}