/* Bánh Mì Sáng Nay: a Saigon street cart sign. Tomato-red paint, mustard trim, newsprint paper,
   hard ink outlines with offset print shadows, a script logo. */
:root {
  --bg: #fbf2df; --card: #fffbf2; --edge: #2b1a10; --soft: #f5e6c6; --ink: #2b1a10; --ink2: #74593f;
  --coral1: #f26a4b; --coral2: #d93d24; --coral3: #8f2412; --green-t: #2f7d3a; --shadow: 3px 3px 0 #2b1a10;
  --bar: #c9331c; --tk-bg: #fbeed2; --tk-line: #2b1a10; --tk-badge: #c9331c; --tk-chip: #fff6e2; --tk-radius: 12px;
  --logo: #ffd34d; --logo-sub: #fff6e2; --logo-edge: #8f2412; --sign-ink: #8f2412; --sign-ink2: #2b1a10;
  --title: 'Lobster', 'Be Vietnam Pro', cursive;
}
html, body { background: #e9d9b8; }
.btn { border-radius: 12px; box-shadow: inset 0 -3px 0 var(--b3), 3px 3px 0 #2b1a10; border: 2px solid #2b1a10; }
.btn.big, .btn.sm { border-radius: 14px; }
.btn.cream { --b1: #fffbf2; --b2: #f5e6c6; --b3: #d8c093; box-shadow: inset 0 -2px 0 var(--b3), 3px 3px 0 #2b1a10; }
.btn.gold { --b1: #ffd34d; --b2: #f2b31c; --b3: #a8730c; color: #2b1a10; }
.btn.big { font-weight: 400; font-size: 26px; letter-spacing: .3px; }
#title .logo { font-weight: 400; font-size: 64px; transform: rotate(-4deg); -webkit-text-stroke: 2px #8f2412; paint-order: stroke fill; text-shadow: 0 5px 0 #8f2412, 0 10px 0 rgba(43, 26, 16, .35); }
#title .logo small { display: table; margin-left: auto; margin-right: auto; margin-top: 12px; padding: 4px 18px 6px; background: #c9331c; color: #fff6e2; border: 2px solid #2b1a10; border-radius: 6px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 900; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-shadow: none; -webkit-text-stroke: 0; box-shadow: 3px 3px 0 #2b1a10; }
.hud { color: #fff6e2; border-bottom: 3px solid #2b1a10; box-shadow: none; }
.hud .chip { background: rgba(255, 246, 226, .16); color: #fff6e2; border: 1.5px solid rgba(255, 246, 226, .35); }
.hud .chip small { color: #ffd9c9; }
.hud .iconbtn { background: rgba(255, 246, 226, .16); color: #fff6e2; border-color: rgba(255, 246, 226, .35); }
.card, .item, .recipe, .ledger, .say, .lrow { border: 2px solid #2b1a10; border-radius: 12px; box-shadow: 3px 3px 0 #2b1a10; }
.card.warn { background: #fff0c7; border-color: #2b1a10; }
.card h3 .tag { background: #ffd34d; color: #2b1a10; border-radius: 6px; }
.hero { border-radius: 0; border-bottom: 3px solid #2b1a10; }
.dock, .shiftbar { background: #fffbf2; border-top: 3px solid #2b1a10; box-shadow: none; }
.dock button { color: #2b1a10; }
.sheet { border-radius: 18px 18px 0 0; border-top: 3px solid #2b1a10; }
.sheet header h2 { font-family: var(--title); font-weight: 400; font-size: 26px; color: #8f2412; }
.sheet footer { background: #fff6e2; border-top: 2px solid #2b1a10; }
.ticket { border-width: 3px; box-shadow: 4px 4px 0 #2b1a10; background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(43, 26, 16, .06) 34px 36px); }
.ticket .name { font-family: 'Be Vietnam Pro', sans-serif; }
.ticket .bar { border-radius: 3px; background: #ead7ae; border: 2px solid #2b1a10; }
.sign b { font-weight: 400; }
.seg { background: #f5e6c6; border: 2px solid #2b1a10; border-radius: 12px; }
.seg button { border-radius: 8px; } .seg button.on { background: #c9331c; color: #fff6e2; box-shadow: none; }
.podium { background: #fff0c7; border: 2px solid #2b1a10; border-radius: 12px; }
.pod { border-radius: 10px; border-color: #2b1a10; }
.mecard { border: 2px solid #2b1a10; border-radius: 12px; box-shadow: 3px 3px 0 #2b1a10; }
#toast div { border-radius: 10px; border-color: #2b1a10; box-shadow: 3px 3px 0 #2b1a10; }
#title .logo { font-size: 58px; }
/* the cart sign is a red plate with a yellow rim */
:root { --sign-ink: #ffd34d; --sign-ink2: #fff6e2; }
.sign b { text-shadow: 0 3px 0 #8f2412; }