:root {
  --sc-canvas: #fbfdf4;
  --sc-surface: #ffffff;
  --sc-ink: #173c2c;
  --sc-ink-soft: #4b6457;
  --sc-accent: #f9f70c;
  --sc-accent-ink: #173c2c;
  --sc-font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --sc-font-text: 'DM Sans', Arial, sans-serif;
}
body { background: var(--sc-canvas); color: var(--sc-ink); }
html { scrollbar-color: #50830d #e7f4cc; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, a { -webkit-tap-highlight-color: transparent; }
button:active, a.MuiButton-root:active { transform: translateY(1px); }

.breakfast-scene { position: relative; isolation: isolate; background: #d9f5fc; }

@media (hover: hover) and (pointer: fine) {
  .photo-postcard { transition: transform 180ms cubic-bezier(.23,1,.32,1); }
  .photo-postcard:hover { transform: rotate(0deg) translateY(-4px); }
}