/* Soulbrew's single, final visual language.
   This file intentionally loads after route styles so legacy colour rules cannot
   make controls or copy disappear against their surface. */
:root {
  /* Minimal mocha palette: foam, milk coffee, dark roast and caramel. */
  --sb-cafe-cream: #fffcf7;
  --sb-cafe-latte-50: #f7efe5;
  --sb-cafe-latte-100: #ebdac6;
  --sb-cafe-latte-200: #f6dfc4;
  --sb-cafe-latte-300: #d9c5ae;
  --sb-cafe-espresso: #2b1a13;
  --sb-cafe-espresso-soft: #70584b;
  --sb-cafe-line: #d9c5ae;
  /* Legacy aliases map to the caramel interaction scale. */
  --sb-cafe-blush: #a85d25;
  --sb-cafe-blush-deep: #8f451a;
  /* Status hues remain semantically distinct from the brand palette. */
  --sb-status-success: #37745d;
  --sb-status-success-tint: #e3f0e8;
  --sb-status-warning: #9a5c20;
  --sb-status-warning-tint: #fff0dc;
  --sb-status-danger: #a33f38;
  --sb-status-danger-tint: #f9e5e2;
  --sb-status-info: #426d88;
  --sb-status-info-tint: #e4f0f6;
  --sb-cream: var(--sb-cafe-cream);
  --sb-latte-50: var(--sb-cafe-latte-50);
  --sb-latte-100: var(--sb-cafe-latte-100);
  --sb-latte-200: var(--sb-cafe-latte-200);
  --sb-latte-300: var(--sb-cafe-latte-300);
  --sb-espresso: var(--sb-cafe-espresso);
  --sb-espresso-soft: var(--sb-cafe-espresso-soft);
  --sb-line: var(--sb-cafe-line);
  --sb-blush: var(--sb-cafe-blush);
  --sb-blush-deep: var(--sb-cafe-blush-deep);

  /* Shared neutral UI roles. These aliases are the only palette values route
     styles should consume; semantic hues remain reserved for status states. */
  --sb-canvas: var(--sb-cafe-cream);
  --sb-surface: var(--sb-cafe-latte-50);
  --sb-surface-subtle: var(--sb-cafe-latte-100);
  --sb-surface-selected: var(--sb-cafe-latte-200);
  --sb-border: var(--sb-cafe-line);
  --sb-text: var(--sb-cafe-espresso);
  --sb-text-muted: var(--sb-cafe-espresso-soft);
  --sb-text-faint: #7a736a;
  --sb-emphasis: var(--sb-cafe-blush);
  --sb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sb-cafe-blush) 36%, transparent);

  --paper: var(--sb-latte-50);
  --paper-raised: var(--sb-cream);
  --paper-sunken: var(--sb-latte-100);
  --ink: var(--sb-espresso);
  --ink-soft: var(--sb-espresso-soft);
  --ink-faint: #7a736a;
  --hairline: rgba(42, 38, 33, .14);
  --hairline-strong: rgba(42, 38, 33, .28);
  --accent: var(--sb-blush);
  --accent-deep: var(--sb-blush-deep);
  --accent-tint: var(--sb-latte-200);
  --success: var(--sb-status-success);
  --success-tint: var(--sb-status-success-tint);
  --warn: var(--sb-status-warning);
  --warn-tint: var(--sb-status-warning-tint);
  --danger: var(--sb-status-danger);
  --danger-tint: var(--sb-status-danger-tint);
  --info: var(--sb-status-info);
  --info-tint: var(--sb-status-info-tint);
  --focus: var(--sb-blush-deep);
  --green: var(--sb-espresso);
  --green-deep: var(--sb-blush-deep);
  --green-dark: var(--sb-espresso);
  --moss: var(--sb-blush-deep);
  --cream: var(--sb-cream);
  --cream-dim: var(--sb-latte-100);
  --ui-espresso: var(--sb-espresso);
  --ui-espresso-deep: var(--sb-blush-deep);
  --ui-cream: var(--sb-cream);
  --ui-stone: var(--sb-latte-100);
  --ui-ink: var(--sb-espresso);
  --ui-muted: var(--sb-espresso-soft);
  --ui-faint: #7a736a;
  --ui-peach: var(--sb-blush);
  --ui-peach-soft: var(--sb-latte-200);
  --ui-peach-strong: var(--sb-blush-deep);
  --ui-line: var(--hairline);
  --ui-line-strong: var(--hairline-strong);
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sb-blush) 36%, transparent);
  --side-bg: var(--sb-latte-200);
  --side-bg-2: var(--sb-latte-300);
  --side-ink: var(--sb-espresso);
  --side-ink-soft: rgba(42, 38, 33, .74);
  --side-ink-faint: rgba(42, 38, 33, .58);
  --side-active: rgba(255, 250, 244, .52);
  --side-accent: var(--sb-blush-deep);
  --side-hairline: rgba(42, 38, 33, .16);
}

::selection { background: var(--sb-latte-200); color: var(--sb-espresso); }
:focus-visible { outline: 3px solid var(--sb-blush-deep); outline-offset: 3px; }

/* Shared storefront canvas, navigation, and controls. */
html body.lp {
  /* Defeat earlier experimental body-level palettes with one inherited source. */
  --sb-ink: var(--sb-cafe-espresso);
  --sb-ink-2: #423a32;
  --sb-cream: var(--sb-cafe-cream);
  --sb-paper: var(--sb-cafe-latte-50);
  --sb-lime: var(--sb-cafe-latte-200);
  --sb-peach: var(--sb-cafe-blush);
  --sb-mist: var(--sb-cafe-latte-100);
  --paper: var(--sb-cafe-latte-50);
  --paper-raised: var(--sb-cafe-cream);
  --paper-sunken: var(--sb-cafe-latte-100);
  --ink: var(--sb-cafe-espresso);
  --ink-soft: var(--sb-cafe-espresso-soft);
  --ink-faint: #7a736a;
  --accent: var(--sb-cafe-espresso);
  --accent-deep: #423a32;
  --accent-tint: var(--sb-cafe-latte-100);
  --success: var(--sb-status-success);
  --success-tint: var(--sb-status-success-tint);
  --warn: var(--sb-status-warning);
  --warn-tint: var(--sb-status-warning-tint);
  --danger: var(--sb-status-danger);
  --danger-tint: var(--sb-status-danger-tint);
  --info: var(--sb-status-info);
  --info-tint: var(--sb-status-info-tint);
  --focus: var(--sb-cafe-blush-deep);
  --green: var(--sb-cafe-espresso);
  --green-deep: #423a32;
  --moss: var(--sb-cafe-blush-deep);
  --cream: var(--sb-cafe-cream);
  --cream-dim: var(--sb-cafe-latte-100);
  background: var(--sb-cafe-latte-50) !important;
  color: var(--sb-cafe-espresso) !important;
}
html body.lp .lp-nav,
html body.lp .lp-nav.is-scrolled,
html body.lp .lp-nav--solid,
html body.lp .lp-home-nav,
html body.lp .lp-home-nav.is-scrolled,
html body.lp .lp-home-nav:not(.is-scrolled) { background: rgba(255, 250, 244, .97) !important; border-bottom-color: var(--sb-line) !important; color: var(--sb-espresso) !important; }
html body.lp .lp-nav__left a,
html body.lp .lp-ico,
html body.lp .lp-menu a { color: var(--sb-espresso) !important; opacity: 1 !important; }
html body.lp .lp-ico svg,
html body.lp .lp-ico svg * { color: var(--sb-espresso) !important; stroke: var(--sb-espresso) !important; }
html body.lp .lp-nav__brand img,
html body.lp .lp-foot__brand img { filter: brightness(0) !important; }
html body.lp .lp-menu { background: var(--sb-cream) !important; border-color: var(--sb-line) !important; }
html body.lp .cart-count,
html body.lp .dcard__badge,
html body.lp .order-ribbon__icon,
html body.lp .finale__ticker { background: var(--sb-latte-200) !important; color: var(--sb-espresso) !important; }
html body.lp .pill--dark,
html body.lp .btn-primary,
html body.lp .dcard__add,
html body.lp .place > i { background: var(--sb-espresso) !important; border-color: var(--sb-espresso) !important; color: var(--sb-cream) !important; }
html body.lp .pill--dark:hover,
html body.lp .btn-primary:hover:not(:disabled),
html body.lp .dcard:hover .dcard__add { background: var(--sb-blush-deep) !important; border-color: var(--sb-blush-deep) !important; color: var(--sb-cream) !important; }
html body.lp .pill--peach,
html body.lp .filter-pill[aria-pressed="true"],
html body.lp .segmented button[aria-pressed="true"] { background: var(--sb-latte-200) !important; border-color: var(--sb-latte-300) !important; color: var(--sb-espresso) !important; }
html body.lp .btn-secondary { color: var(--sb-espresso) !important; border-color: var(--sb-line) !important; }
html body.lp .btn-secondary:hover:not(:disabled) { background: var(--sb-espresso) !important; border-color: var(--sb-espresso) !important; color: var(--sb-cream) !important; }
html body.lp .btn:disabled,
html body.lp .pill:disabled { background: var(--sb-latte-100) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso-soft) !important; opacity: 1 !important; }
html body.lp .btn.btn-primary:disabled,
html body.lp [data-place-order]:disabled { background: var(--sb-latte-100) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso-soft) !important; opacity: 1 !important; }
html body.lp input::placeholder,
html body.lp textarea::placeholder { color: var(--sb-espresso-soft) !important; opacity: .72 !important; }
html body.lp .status-pill.ok { background: var(--sb-status-success-tint) !important; border-color: color-mix(in srgb, var(--sb-status-success) 24%, transparent) !important; color: var(--sb-status-success) !important; }
html body.lp .status-pill.warn { background: var(--sb-status-warning-tint) !important; border-color: color-mix(in srgb, var(--sb-status-warning) 24%, transparent) !important; color: var(--sb-status-warning) !important; }
html body.lp .status-pill.danger { background: var(--sb-status-danger-tint) !important; border-color: color-mix(in srgb, var(--sb-status-danger) 24%, transparent) !important; color: var(--sb-status-danger) !important; }
html body.lp .checkout-payment-cancelled { background: var(--sb-status-warning-tint) !important; border-left-color: var(--sb-status-warning) !important; color: var(--sb-espresso) !important; }

/* Storefront sections. A dark espresso anchor is retained for visual depth. */
html body.lp .hero { background: linear-gradient(90deg, var(--sb-cream) 0 57%, var(--sb-latte-100) 57% 100%) !important; color: var(--sb-espresso) !important; }
html body.lp .hero__big,
html body.lp .hero__text-link,
html body.lp .hero__proof b { color: var(--sb-espresso) !important; }
html body.lp .hero__big em,
html body.lp .hero__eyebrow,
html body.lp .ey,
html body.lp .dcard__no { color: var(--sb-blush-deep) !important; }
html body.lp .hero__eyebrow span { background: var(--sb-blush) !important; }
html body.lp .hero__halo,
html body.lp .loyalty__art,
html body.lp .delivery__visual::before { background: var(--sb-latte-200) !important; box-shadow: none !important; }
html body.lp .hero__note,
html body.lp .drink-card,
html body.lp .outlet-card,
html body.lp .outlet,
html body.lp .account-card,
html body.lp .auth-card,
html body.lp .checkout-card,
html body.lp .outlet-radio,
html body.lp .field input,
html body.lp .field select,
html body.lp .field textarea,
html body.lp .promo-row input { background: var(--sb-cream) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso) !important; }
html body.lp .selection,
html body.lp .places { background: var(--sb-cream) !important; color: var(--sb-espresso) !important; }
html body.lp .section-heading > p,
html body.lp .dcard__fe,
html body.lp .delivery__copy > p:not(.ey),
html body.lp .delivery__card small,
html body.lp .delivery__route,
html body.lp .place p { color: var(--sb-espresso-soft) !important; }
html body.lp .dcard,
html body.lp .dcard__nm,
html body.lp .dcard__pr,
html body.lp .delivery__card strong,
html body.lp .delivery__buttons > a:not(.pill),
html body.lp .place h3 { color: var(--sb-espresso) !important; }
html body.lp .dcard__im,
html body.lp .dcard__im--sun,
html body.lp .dcard__im--pink,
html body.lp .dcard__im--oat,
html body.lp .dcard__im--sage { background: var(--sb-latte-100) !important; }
html body.lp .dcard:nth-child(2) .dcard__im { background: var(--sb-latte-200) !important; }
html body.lp .dcard:nth-child(3) .dcard__im { background: color-mix(in srgb, var(--sb-latte-100) 62%, var(--sb-blush) 38%) !important; }
html body.lp .dcard:nth-child(4) .dcard__im { background: color-mix(in srgb, var(--sb-latte-100) 72%, var(--sb-latte-300) 28%) !important; }
html body.lp .loyalty__copy .ey,
html body.lp .loyalty__copy li span,
html body.lp .delivery__copy h2 em,
html body.lp .delivery__steps b,
html body.lp .place__idx,
html body.lp .place__hrs b { color: var(--sb-blush-deep) !important; }
html body.lp .loyalty__copy > p:not(.ey) { color: var(--sb-espresso-soft) !important; }
html body.lp .loyalty__points { background: var(--sb-espresso) !important; color: var(--sb-cream) !important; }
html body.lp .loyalty__points small,
html body.lp .loyalty__points strong span { color: var(--sb-latte-100) !important; }
html body.lp .loyalty__points i b,
html body.lp .delivery__status { background: var(--sb-latte-200) !important; color: var(--sb-espresso) !important; }
html body.lp .delivery__card { background: var(--sb-cream) !important; }
html body.lp .delivery__line { background: var(--sb-latte-100) !important; }
html body.lp .delivery__line i { background: var(--sb-blush-deep) !important; }
html body.lp .place { background: var(--sb-latte-50) !important; border-color: var(--sb-line) !important; }
html body.lp .place:hover { background: var(--sb-latte-100) !important; }
html body.lp .menu-body,
html body.lp .outlets-list,
html body.lp .account-body,
html body.lp .checkout-body,
html body.lp .delivery { background: var(--sb-latte-50) !important; color: var(--sb-espresso) !important; }
html body.lp .loyalty,
html body.lp .order-summary .checkout-card { background: var(--sb-latte-100) !important; color: var(--sb-espresso) !important; }
html body.lp .menu-hero,
html body.lp .outlets-hero,
html body.lp .account-hero,
html body.lp .checkout-hero,
html body.lp .announce { background: var(--sb-latte-200) !important; color: var(--sb-espresso) !important; }
html body.lp .menu-hero *,
html body.lp .outlets-hero *,
html body.lp .account-hero *,
html body.lp .checkout-hero *,
html body.lp .announce * { color: var(--sb-espresso) !important; }
html body.lp .menu-hero .ey,
html body.lp .outlets-hero .ey,
html body.lp .account-hero .ey,
html body.lp .checkout-hero .ey,
html body.lp .menu-order-context *,
html body.lp .menu-fulfillment-choice * { color: var(--sb-espresso) !important; }
html body.lp .order-ribbon,
html body.lp .mood,
html body.lp .finale,
html body.lp .lp-foot,
html body.lp .delivery__visual { background: var(--sb-espresso) !important; color: var(--sb-cream) !important; }
html body.lp .order-ribbon *,
html body.lp .mood > *,
html body.lp .finale *,
html body.lp .lp-foot * { color: var(--sb-cream) !important; }
html body.lp .order-ribbon__actions a { border-color: rgba(255, 250, 244, .42) !important; background: rgba(255, 250, 244, .08) !important; }
html body.lp .order-ribbon__actions a:hover { background: var(--sb-cream) !important; color: var(--sb-espresso) !important; }
html body.lp .order-ribbon__actions a:hover * { color: var(--sb-espresso) !important; }
html body.lp .mood__prompt,
html body.lp .mood__panel { background: rgba(255, 250, 244, .08) !important; border-color: rgba(255, 250, 244, .30) !important; }
html body.lp .mood__panel *,
html body.lp .mood__choices button,
html body.lp .mood__sparks button { color: var(--sb-cream) !important; }
html body.lp .mood__prompt-foot button,
html body.lp .mood__choices button[aria-pressed="true"],
html body.lp .mood__types button[aria-pressed="true"],
html body.lp .mood__moments button[aria-pressed="true"] { background: var(--sb-latte-200) !important; border-color: var(--sb-latte-200) !important; color: var(--sb-espresso) !important; }
html body.lp .mood__prompt-foot button *,
html body.lp .mood__choices button[aria-pressed="true"] *,
html body.lp .mood__types button[aria-pressed="true"] *,
html body.lp .mood__moments button[aria-pressed="true"] * { color: var(--sb-espresso) !important; }
html body.lp .account-dashboard-card--points { background: linear-gradient(135deg, var(--sb-latte-200), var(--sb-latte-300)) !important; color: var(--sb-espresso) !important; }
html body.lp .account-dashboard-card--points * { color: var(--sb-espresso) !important; }
html body.lp .mobile-cart-summary { background: var(--sb-latte-200) !important; color: var(--sb-espresso) !important; }
html body.lp .mobile-cart-summary * { color: var(--sb-espresso) !important; }
html body.lp.about-page { background: var(--sb-latte-50) !important; color: var(--sb-espresso) !important; }
html body.lp.about-page .about-story__intro h1,
html body.lp.about-page .about-story__body p:last-child { color: var(--sb-espresso) !important; }
html body.lp.about-page .about-story__body { color: var(--sb-espresso-soft) !important; }
html body.lp.about-page .about-story__intro::after { background: var(--sb-line) !important; }

/* Admin uses the same cream, latte, espresso and blush hierarchy. */
html body.admin-body,
html body.admin-body .admin-app,
html body.admin-body .admin-main,
html body.admin-body .admin-content { background: var(--sb-latte-50) !important; color: var(--sb-espresso) !important; }
html body.admin-body {
  --paper: var(--sb-cafe-latte-50);
  --paper-raised: var(--sb-cafe-cream);
  --paper-sunken: var(--sb-cafe-latte-100);
  --ink: var(--sb-cafe-espresso);
  --ink-soft: var(--sb-cafe-espresso-soft);
  --ink-faint: #80695a;
  --hairline: rgba(42, 29, 22, .14);
  --hairline-strong: rgba(42, 29, 22, .28);
  --accent: var(--sb-cafe-espresso);
  --accent-deep: #4d3022;
  --accent-tint: var(--sb-cafe-latte-100);
  --success: var(--sb-status-success);
  --success-tint: var(--sb-status-success-tint);
  --warn: var(--sb-status-warning);
  --warn-tint: var(--sb-status-warning-tint);
  --danger: var(--sb-status-danger);
  --danger-tint: var(--sb-status-danger-tint);
  --info: var(--sb-status-info);
  --info-tint: var(--sb-status-info-tint);
  --focus: var(--sb-cafe-blush-deep);
  --side-bg: var(--sb-cafe-latte-200);
  --side-bg-2: var(--sb-cafe-latte-300);
  --side-ink: var(--sb-cafe-espresso);
  --side-ink-soft: rgba(42, 29, 22, .74);
  --side-ink-faint: rgba(42, 29, 22, .58);
  --side-active: rgba(255, 250, 244, .52);
  --side-accent: var(--sb-cafe-blush-deep);
}
html body.admin-body .admin-side,
html body.admin-body .admin-side.is-collapsed { background: linear-gradient(180deg, var(--sb-latte-200), var(--sb-latte-300)) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso) !important; }
html body.admin-body .admin-side *,
html body.admin-body .admin-nav__item,
html body.admin-body .admin-side__signout { color: var(--sb-espresso) !important; }
html body.admin-body .admin-side__brand img { filter: brightness(0) !important; }
html body.admin-body .admin-nav__item:hover,
html body.admin-body .admin-nav__item.is-active,
html body.admin-body .admin-side__signout:hover { background: rgba(255, 250, 244, .54) !important; color: var(--sb-espresso) !important; }
html body.admin-body .admin-topbar,
html body.admin-body .admin-card,
html body.admin-body .admin-panel,
html body.admin-body .auth-card,
html body.admin-body .stat-tile,
html body.admin-body .product-row,
html body.admin-body .avail-row,
html body.admin-body .og-card,
html body.admin-body .cms-card,
html body.admin-body .store-status,
html body.admin-body .admin-tablewrap,
html body.admin-body .schedule-day,
html body.admin-body .schedule-summary,
html body.admin-body .schedule-slot,
html body.admin-body .pos-product,
html body.admin-body .pos-cart,
html body.admin-body .pos-review,
html body.admin-body .pos-complete,
html body.admin-body .kds-ticket,
html body.admin-body .editor-drawer,
html body.admin-body .admin-command__dialog { background: var(--sb-cream) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso) !important; }
html body.admin-body .admin-table th { background: var(--sb-latte-100) !important; color: var(--sb-espresso) !important; }
html body.admin-body input,
html body.admin-body select,
html body.admin-body textarea,
html body.admin-body .admin-inline-search { background: var(--sb-cream) !important; border-color: var(--sb-line) !important; color: var(--sb-espresso) !important; }
html body.admin-body input::placeholder,
html body.admin-body textarea::placeholder { color: var(--sb-espresso-soft) !important; opacity: .72 !important; }
html body.admin-body .dash-welcome,
html body.admin-body .content-intro { background: linear-gradient(135deg, var(--sb-latte-100), var(--sb-latte-200)) !important; color: var(--sb-espresso) !important; }
html body.admin-body .dash-welcome *,
html body.admin-body .content-intro * { color: var(--sb-espresso) !important; }
html body.admin-body .btn-primary,
html body.admin-body [data-admin-root] .btn-primary,
html body.admin-body .kds-bump,
html body.admin-body .pos-charge,
html body.admin-body .pos-mode.is-active { background: var(--sb-espresso) !important; border-color: var(--sb-espresso) !important; color: var(--sb-cream) !important; }
html body.admin-body .btn-primary *,
html body.admin-body .kds-bump *,
html body.admin-body .pos-charge * { color: var(--sb-cream) !important; }
html body.admin-body .btn-primary:hover:not(:disabled),
html body.admin-body .kds-bump:hover,
html body.admin-body .pos-charge:hover { background: var(--sb-blush-deep) !important; border-color: var(--sb-blush-deep) !important; }
html body.admin-body .filter-pill.is-active,
html body.admin-body .admin-mobile-nav__item.is-active,
html body.admin-body .schedule-day.is-active,
html body.admin-body .admin-switch input:checked + span { background: var(--sb-latte-200) !important; border-color: var(--sb-latte-300) !important; color: var(--sb-espresso) !important; }
html body.admin-body .admin-badge,
html body.admin-body .auth-link,
html body.admin-body .pos-product__add { color: var(--sb-blush-deep) !important; }
html body.admin-body .admin-badge { border-color: var(--sb-blush-deep) !important; }
html body.admin-body .status-pill.ok { background: var(--sb-status-success-tint) !important; border-color: color-mix(in srgb, var(--sb-status-success) 24%, transparent) !important; color: var(--sb-status-success) !important; }
html body.admin-body .status-pill.warn { background: var(--sb-status-warning-tint) !important; border-color: color-mix(in srgb, var(--sb-status-warning) 24%, transparent) !important; color: var(--sb-status-warning) !important; }
html body.admin-body .status-pill.danger { background: var(--sb-status-danger-tint) !important; border-color: color-mix(in srgb, var(--sb-status-danger) 24%, transparent) !important; color: var(--sb-status-danger) !important; }
html body.admin-body .btn-danger-ghost { border-color: var(--sb-status-danger) !important; color: var(--sb-status-danger) !important; }
html body.admin-body .btn-danger-ghost:hover:not(:disabled),
html body.admin-body [data-delete]:hover:not(:disabled) { background: var(--sb-status-danger-tint) !important; border-color: var(--sb-status-danger) !important; color: var(--sb-status-danger) !important; }

/* Final shared chrome contract.  Older route styles define several header
   variants; these rules intentionally provide the single storefront outcome. */
html body.lp .lp-nav,
html body.lp .lp-nav.is-scrolled,
html body.lp .lp-nav--solid,
html body.lp .lp-home-nav,
html body.lp .lp-home-nav.is-scrolled,
html body.lp .lp-home-nav:not(.is-scrolled) {
  background: var(--sb-cafe-espresso) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--sb-cafe-cream) 18%, transparent) !important;
  color: var(--sb-cafe-cream) !important;
}
html body.lp .lp-nav__left a,
html body.lp .lp-ico,
html body.lp .lp-menu a {
  color: var(--sb-cafe-cream) !important;
}
html body.lp .lp-ico svg,
html body.lp .lp-ico svg * {
  color: var(--sb-cafe-cream) !important;
  stroke: var(--sb-cafe-cream) !important;
}
html body.lp .lp-nav__row {
  min-height: 72px !important;
  padding-block: 10px !important;
}
html body.lp .lp-nav__brand img {
  display: block !important;
  width: auto !important;
  height: 44px !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}
html body.lp .lp-menu {
  background: var(--sb-cafe-espresso) !important;
  border-color: color-mix(in srgb, var(--sb-cafe-cream) 18%, transparent) !important;
}
html body.lp .lp-foot { background: var(--sb-cafe-espresso) !important; }
html body.lp .lp-foot__brand img { filter: brightness(0) invert(1) !important; }

/* Give the operations shell the same cocoa anchor while retaining semantic
   success, warning, and destructive colours from the shared status tokens. */
html body.admin-body .admin-side,
html body.admin-body .admin-side.is-collapsed {
  background: linear-gradient(180deg, var(--sb-cafe-espresso), var(--sb-cafe-blush-deep)) !important;
  border-color: color-mix(in srgb, var(--sb-cafe-cream) 16%, transparent) !important;
  color: var(--sb-cafe-cream) !important;
}
html body.admin-body .admin-side *,
html body.admin-body .admin-nav__item,
html body.admin-body .admin-side__signout { color: var(--sb-cafe-cream) !important; }
html body.admin-body .admin-side__brand img { filter: brightness(0) invert(1) !important; }
html body.admin-body .admin-nav__item:hover,
html body.admin-body .admin-nav__item.is-active,
html body.admin-body .admin-side__signout:hover {
  background: color-mix(in srgb, var(--sb-cafe-cream) 16%, transparent) !important;
  color: var(--sb-cafe-cream) !important;
}
html body.admin-body .admin-topbar {
  background: var(--sb-cafe-cream) !important;
  border-bottom-color: var(--sb-cafe-line) !important;
}
html body.admin-body .btn-primary:hover:not(:disabled),
html body.admin-body .kds-bump:hover,
html body.admin-body .pos-charge:hover {
  background: var(--sb-cafe-blush-deep) !important;
  border-color: var(--sb-cafe-blush-deep) !important;
}

@media (max-width: 1024px) {
  html body.lp .lp-nav__row { min-height: 64px !important; }
  html body.lp .lp-nav__brand img { height: 36px !important; }
}

@media (max-width: 900px) {
  html body.lp .hero { background: linear-gradient(var(--sb-cream) 0 59%, var(--sb-latte-100) 59% 100%) !important; }
}

/* Minimal storefront surfaces. Keep the brand warmth in controls and small
   media treatments, while the customer journey itself stays quiet and white. */
html body.lp {
  --paper: #fff;
  --paper-raised: #fff;
  --sb-paper: #fff;
  background: #fff !important;
}
html body.lp main,
html body.lp .page,
html body.lp .site-main {
  background: #fff !important;
}
html body.lp .hero,
html body.lp .selection,
html body.lp .loyalty,
html body.lp .delivery,
html body.lp .places,
html body.lp .menu-body,
html body.lp .outlets-list,
html body.lp .account-body,
html body.lp .checkout-body,
html body.lp .menu-hero,
html body.lp .outlets-hero,
html body.lp .account-hero,
html body.lp .checkout-hero,
html body.lp.about-page {
  background: #fff !important;
}
html body.lp .announce {
  background: var(--sb-latte-100) !important;
}
html body.lp .hero__halo,
html body.lp .loyalty__art,
html body.lp .delivery__visual::before {
  background: var(--sb-latte-200) !important;
}
html body.lp .place,
html body.lp .order-summary .checkout-card {
  background: #fff !important;
}
html body.lp .place:hover { background: var(--sb-latte-100) !important; }

/* The only persistent storefront anchor is the shared cocoa navigation. */
html body.lp .lp-nav,
html body.lp .lp-nav.is-scrolled,
html body.lp .lp-nav--solid,
html body.lp .lp-home-nav,
html body.lp .lp-home-nav.is-scrolled,
html body.lp .lp-home-nav:not(.is-scrolled),
html body.lp .lp-menu {
  background: var(--sb-cafe-espresso) !important;
  color: #fff !important;
}
html body.lp .lp-nav__left a,
html body.lp .lp-ico,
html body.lp .lp-menu a,
html body.lp .lp-ico svg,
html body.lp .lp-ico svg * {
  color: #fff !important;
  stroke: #fff !important;
}

/* Customer loyalty summaries share one restrained cocoa gradient. */
html body.lp .loyalty__points,
html body.lp .account-dashboard-card--points {
  background: linear-gradient(135deg, var(--sb-cafe-espresso), var(--sb-cafe-blush-deep)) !important;
  color: #fff !important;
}
html body.lp .loyalty__points *,
html body.lp .account-dashboard-card--points * { color: #fff !important; }
html body.lp .loyalty__points strong span { color: var(--sb-latte-100) !important; }
html body.lp .loyalty__points i { background: rgba(255, 255, 255, .22) !important; }
html body.lp .loyalty__points i b { background: var(--sb-latte-200) !important; }

/* White-canvas palette ownership. This final contract is intentionally limited
   to shared surfaces so route artwork can vary without introducing a second
   UI color system. */
html body.lp {
  --paper: #fff;
  --paper-raised: var(--sb-cafe-cream);
  --paper-sunken: var(--sb-cafe-latte-100);
  --ink: var(--sb-cafe-espresso);
  --ink-soft: var(--sb-cafe-espresso-soft);
  --ink-faint: #80695a;
  --hairline: var(--sb-cafe-line);
  --hairline-strong: var(--sb-cafe-latte-300);
  --accent: var(--sb-cafe-espresso);
  --accent-deep: var(--sb-cafe-blush-deep);
  --accent-tint: var(--sb-cafe-latte-100);
  background: #fff !important;
  color: var(--sb-cafe-espresso) !important;
}
html body.lp .hero,
html body.lp .selection,
html body.lp .places,
html body.lp .menu-body,
html body.lp .outlets-list,
html body.lp .account-body,
html body.lp .checkout-body,
html body.lp.about-page { background: #fff !important; }
html body.lp .loyalty,
html body.lp .order-summary .checkout-card { background: var(--sb-cafe-latte-100) !important; }
html body.lp .drink-card,
html body.lp .outlet-card,
html body.lp .outlet,
html body.lp .account-card,
html body.lp .auth-card,
html body.lp .checkout-card,
html body.lp .outlet-radio,
html body.lp .field input,
html body.lp .field select,
html body.lp .field textarea,
html body.lp .promo-row input,
html body.lp .place { background: var(--sb-cafe-cream) !important; border-color: var(--sb-cafe-line) !important; }

html body.admin-body,
html body.admin-body .admin-app,
html body.admin-body .admin-main,
html body.admin-body .admin-content {
  --paper: #fff;
  --paper-raised: var(--sb-cafe-cream);
  --paper-sunken: var(--sb-cafe-latte-100);
  background: #fff !important;
  color: var(--sb-cafe-espresso) !important;
}
html body.admin-body .admin-topbar,
html body.admin-body .admin-card,
html body.admin-body .admin-panel,
html body.admin-body .auth-card,
html body.admin-body .stat-tile,
html body.admin-body .product-row,
html body.admin-body .avail-row,
html body.admin-body .og-card,
html body.admin-body .cms-card,
html body.admin-body .store-status,
html body.admin-body .admin-tablewrap,
html body.admin-body .schedule-day,
html body.admin-body .schedule-summary,
html body.admin-body .schedule-slot,
html body.admin-body .pos-product,
html body.admin-body .pos-cart,
html body.admin-body .pos-review,
html body.admin-body .pos-complete,
html body.admin-body .kds-ticket,
html body.admin-body .editor-drawer,
html body.admin-body .admin-command__dialog { background: var(--sb-cafe-cream) !important; border-color: var(--sb-cafe-line) !important; }

/* The wordmark is centered relative to the viewport, not the unequal utility
   groups. It is removed from grid flow so the same position survives each
   desktop, tablet, and phone navigation layout. */
html body.lp .lp-nav__row { position: relative; }
html body.lp .lp-nav__brand {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%);
  justify-self: auto !important;
  z-index: 1;
}
html body.lp .lp-nav__left,
html body.lp .lp-nav__right { position: relative; z-index: 2; }

@media (max-width: 640px) {
  html body.lp .lp-nav__brand img { height: 30px !important; }
}

/* Unified visual contract -------------------------------------------------
   This is intentionally the final cascade layer: route styles may compose a
   page, but every reusable UI primitive resolves through these shared tokens. */
:root {
  --sb-radius-control: 10px;
  --sb-radius-card: 16px;
  --sb-radius-feature: 22px;
  --sb-shadow-card: 0 10px 28px rgba(61, 34, 23, .08);
  --sb-shadow-float: 0 24px 60px rgba(61, 34, 23, .16);
  --sb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sb-cafe-blush) 38%, transparent);
  --sb-icon-stroke: 1.65;
}

html body.lp,
html body.admin-body {
  font-family: var(--font-body) !important;
  font-variant-numeric: proportional-nums;
}
html body.lp h1,
html body.lp h2,
html body.lp h3,
html body.lp h4,
html body.admin-body h1,
html body.admin-body h2,
html body.admin-body h3,
html body.admin-body h4 {
  font-family: var(--font-display) !important;
  color: var(--sb-cafe-espresso);
}
html body.admin-body .kpi__value,
html body.admin-body .stat-tile strong,
html body.admin-body .schedule-summary strong,
html body.admin-body .pos-total,
html body.admin-body .admin-table td:has(time) {
  font-variant-numeric: tabular-nums;
}

/* Sentence case is deliberate: this is the editorial page title, not a
   utility label. Compact labels and table headers retain their uppercase cue. */
html body.lp .outlets-hero {
  background: var(--sb-cafe-cream) !important;
  color: var(--sb-cafe-espresso) !important;
  border-bottom: 1px solid var(--sb-cafe-line);
}
html body.lp .outlets-hero .ey { color: var(--sb-cafe-blush-deep) !important; }
html body.lp .outlets-hero__big {
  max-width: 13ch;
  color: var(--sb-cafe-espresso) !important;
  font-size: clamp(3rem, 6.25vw, 5.7rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
  line-height: .91 !important;
  text-transform: none !important;
}
html body.lp .outlets-hero__sub { color: var(--sb-cafe-espresso-soft) !important; font-weight: 400 !important; }

html body.lp .drink-card,
html body.lp .outlet,
html body.lp .account-card,
html body.lp .auth-card,
html body.lp .checkout-card,
html body.lp .outlet-radio,
html body.lp .order-context-outlet,
html body.lp .item-modal,
html body.lp .cart-drawer,
html body.lp .order-context-modal {
  border-color: var(--sb-cafe-line) !important;
  border-radius: var(--sb-radius-card) !important;
  box-shadow: var(--sb-shadow-card);
}
html body.lp .field input,
html body.lp .field select,
html body.lp .field textarea,
html body.lp .promo-row input,
html body.admin-body input,
html body.admin-body select,
html body.admin-body textarea {
  border-color: var(--sb-cafe-line) !important;
  border-radius: var(--sb-radius-control) !important;
  background: var(--sb-cafe-cream) !important;
  color: var(--sb-cafe-espresso) !important;
}
html body.lp .field input:focus,
html body.lp .field select:focus,
html body.lp .field textarea:focus,
html body.lp .promo-row input:focus,
html body.admin-body input:focus,
html body.admin-body select:focus,
html body.admin-body textarea:focus {
  border-color: var(--sb-cafe-blush) !important;
  box-shadow: var(--sb-focus-ring) !important;
}

html body.lp .btn,
html body.lp .pill,
html body.lp .filter-pill,
html body.lp .segmented button,
html body.lp .icon-btn,
html body.admin-body .btn,
html body.admin-body .filter-pill,
html body.admin-body .icon-btn,
html body.admin-body .admin-topbar__link,
html body.admin-body .store-toggle,
html body.admin-body .admin-jump {
  border-radius: var(--sb-radius-control) !important;
}
html body.admin-body .admin-card,
html body.admin-body .stat-tile,
html body.admin-body .product-row,
html body.admin-body .avail-row,
html body.admin-body .og-card,
html body.admin-body .cms-card,
html body.admin-body .store-status,
html body.admin-body .admin-tablewrap,
html body.admin-body .schedule-day,
html body.admin-body .schedule-summary,
html body.admin-body .schedule-slot,
html body.admin-body .pos-product,
html body.admin-body .pos-cart,
html body.admin-body .pos-review,
html body.admin-body .pos-complete,
html body.admin-body .kds-ticket,
html body.admin-body .editor-drawer,
html body.admin-body .admin-command__dialog,
html body.admin-body .admin-empty {
  border-color: var(--sb-cafe-line) !important;
  border-radius: var(--sb-radius-card) !important;
  box-shadow: var(--sb-shadow-card);
}
html body.admin-body .admin-content .btn-ghost,
html body.admin-body .admin-content .icon-btn,
html body.admin-body .admin-topbar__link,
html body.admin-body .store-toggle,
html body.admin-body .admin-jump {
  background: var(--sb-cafe-cream) !important;
  border-color: var(--sb-cafe-line) !important;
  color: var(--sb-cafe-espresso) !important;
}
html body.admin-body .admin-content .btn-ghost:hover:not(:disabled),
html body.admin-body .admin-content .icon-btn:hover,
html body.admin-body .admin-topbar__link:hover,
html body.admin-body .store-toggle:hover,
html body.admin-body .admin-jump:hover {
  background: var(--sb-cafe-latte-100) !important;
  border-color: var(--sb-cafe-blush) !important;
  color: var(--sb-cafe-espresso) !important;
}

/* Icons inherit their control state instead of introducing arbitrary accents. */
html body.lp .lp-ico svg,
html body.lp .icon-btn svg,
html body.lp .order-ribbon__icon svg,
html body.admin-body .admin-nav__item svg,
html body.admin-body .icon-btn svg,
html body.admin-body .admin-topbar__link svg,
html body.admin-body .quick-action__ic svg {
  stroke: currentColor;
  stroke-width: var(--sb-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body.admin-body .admin-nav__item svg { color: currentColor !important; }
html body.admin-body .admin-nav__item.is-active svg { color: var(--sb-cafe-latte-200) !important; }

/* Accessible interaction contract. Route styles may set layout, but visual
   states and control ergonomics remain identical throughout the product. */
html body.lp :is(button, a, input, select, textarea),
html body.admin-body :is(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}
html body.lp :is(.btn, .pill, .filter-pill, .segmented button, .lp-ico, .nav-toggle, .icon-btn),
html body.admin-body :is(.btn, .filter-pill, .admin-nav__item, .admin-burger, .admin-topbar__link, .admin-jump, .store-toggle, .icon-btn) {
  min-height: 44px;
}
html body.lp :is(.field input, .field select, .field textarea, .promo-row input),
html body.admin-body :is(input:not([type="hidden"]), select, textarea) {
  min-height: 48px;
}
html body.lp :is(button, a, input, select, textarea):focus-visible,
html body.admin-body :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--sb-cafe-blush-deep) !important;
  outline-offset: 3px;
}
html body.lp :is(button, input, select, textarea):disabled,
html body.admin-body :is(button, input, select, textarea):disabled,
html body.lp [aria-disabled="true"],
html body.admin-body [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .72 !important;
}
html body.lp :is(input, textarea)::placeholder,
html body.admin-body :is(input, textarea)::placeholder {
  color: var(--sb-cafe-espresso-soft) !important;
  opacity: .82 !important;
}
html body.lp .status-pill,
html body.admin-body .status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 28px;
  border: 1px solid currentColor;
}
html body.lp .status-pill::before,
html body.admin-body .status-pill::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
html body.admin-body .admin-skip-link { z-index: 300; }
html body.admin-body .admin-main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}