/*
 * Soulbrew's single visual contract.
 *
 * Route sheets may arrange content, but this last layer owns the visual
 * language of every reusable surface: the café palette, hierarchy, controls,
 * cards and feedback states. Keeping that ownership here prevents a new route
 * from silently inheriting one of the older experimental palettes.
 */
:root {
  --sb-page: var(--sb-canvas);
  --sb-surface: var(--sb-cafe-latte-50);
  --sb-surface-muted: var(--sb-cafe-latte-100);
  --sb-border: var(--sb-cafe-line);
  --sb-border-strong: #bda991;
  --sb-ink: var(--sb-cafe-espresso);
  --sb-ink-muted: var(--sb-cafe-espresso-soft);
  --sb-ink-faint: #7a736a;
  /* The deeper caramel remains warm but is safe for small text on foam. */
  --sb-action: var(--sb-cafe-blush-deep);
  --sb-action-hover: var(--sb-cafe-blush-deep);
  --sb-highlight: var(--sb-cafe-blush-deep);
  --sb-disabled-surface: var(--sb-cafe-latte-100);
  --sb-disabled-ink: var(--sb-cafe-espresso-soft);
  --sb-radius-control: 10px;
  --sb-radius-card: 16px;
  --sb-radius-feature: 24px;
  --sb-shadow-card: 0 10px 28px rgba(61, 34, 23, .08);
  --sb-shadow-float: 0 22px 56px rgba(61, 34, 23, .16);
}

html body.lp,
html body.admin-body {
  --paper: var(--sb-page);
  --paper-raised: var(--sb-surface);
  --paper-sunken: var(--sb-surface-muted);
  --ink: var(--sb-ink);
  --ink-soft: var(--sb-ink-muted);
  --ink-faint: var(--sb-ink-faint);
  --hairline: var(--sb-border);
  --hairline-strong: var(--sb-border-strong);
  --accent: var(--sb-action);
  --accent-deep: var(--sb-action-hover);
  --accent-tint: var(--sb-surface-muted);
  background: var(--sb-page) !important;
  color: var(--sb-ink);
}

/* Shared hierarchy and section rhythm. */
html body.lp :is(h1, h2, h3, h4),
html body.admin-body :is(h1, h2, h3, h4) {
  color: var(--sb-ink) !important;
  font-family: var(--font-display) !important;
}
html body.lp :is(.ey, .eyebrow),
html body.admin-body :is(.ey, .eyebrow, .admin-topbar__eyebrow) {
  color: var(--sb-action) !important;
  font-weight: 700;
  letter-spacing: .14em;
}
html body.lp :is(.menu-body, .outlets-list, .account-body, .checkout-body, .about-story),
html body.lp :is(.hero, .selection, .delivery, .places) { background: var(--sb-page) !important; }

/* Non-home routes now use the same calm page intro instead of a route-specific
   dark or white treatment. The homepage retains its editorial artwork. */
html body.lp :is(.menu-hero, .outlets-hero, .account-hero, .checkout-hero) {
  background: var(--sb-page) !important;
  border-bottom: 1px solid var(--sb-border);
  color: var(--sb-ink) !important;
}
html body.lp :is(.menu-hero__big, .outlets-hero__big, .account-hero__big, .checkout-hero__big) {
  color: var(--sb-ink) !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
  line-height: .95 !important;
  text-transform: none !important;
}
html body.lp :is(.menu-hero__sub, .outlets-hero__sub, .account-hero__sub, .checkout-hero__sub) { color: var(--sb-ink-muted) !important; }
html body.lp :is(.menu-hero, .outlets-hero, .account-hero, .checkout-hero) .ey { color: var(--sb-action) !important; }

/* Navigation, footer and the persistent order dock are the dark café anchors. */
html body.lp :is(.lp-nav, .lp-nav.is-scrolled, .lp-nav--solid, .lp-home-nav, .lp-menu),
html body.lp .lp-foot {
  background: var(--sb-ink) !important;
  color: #fff !important;
}
html body.lp :is(.lp-nav__left a, .lp-ico, .lp-menu a, .lp-foot a, .lp-foot__tag) { color: #fff !important; }
html body.lp .lp-nav__left a[aria-current="page"] { color: var(--sb-surface-muted) !important; }
html body.lp .lp-ico:hover { background: rgba(255, 255, 255, .12) !important; }
html body.lp .lp-foot__bottom { color: color-mix(in srgb, #fff 76%, var(--sb-ink)) !important; }

/* The order dock is a stable espresso anchor on phone, tablet and desktop.
   Its geometry and safe-area reservation belong to system.css; this final
   layer owns only the colour and interaction contract. */
html body.lp .mobile-order-dock {
  background: color-mix(in srgb, var(--sb-ink) 96%, transparent) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--sb-canvas) !important;
  box-shadow: var(--sb-shadow-float) !important;
}
html body.lp .mobile-order-dock :is(a, button) {
  color: color-mix(in srgb, var(--sb-canvas) 84%, var(--sb-surface-muted)) !important;
}
html body.lp .mobile-order-dock :is(a, button):hover {
  background: rgba(255, 255, 255, .09) !important;
  color: var(--sb-canvas) !important;
}
html body.lp .mobile-order-dock :is(.is-active, [aria-current="page"]) {
  background: var(--sb-surface-selected) !important;
  color: var(--sb-ink) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16) !important;
}
html body.lp .mobile-order-dock :is(.is-active, [aria-current="page"]):hover {
  background: var(--sb-surface-selected) !important;
  color: var(--sb-ink) !important;
}

/* Espresso carries primary actions; caramel stays a restrained interaction cue. */
html body.lp :is(.btn-primary, .pill--dark, .dcard__add, .add-btn),
html body.admin-body :is(.btn-primary, .pos-charge, .kds-bump),
html body.admin-body [data-admin-root] :is(.btn-primary, .pos-charge, .kds-bump) {
  background: var(--sb-ink) !important;
  border-color: var(--sb-ink) !important;
  color: var(--sb-page) !important;
  box-shadow: none;
}
html body.lp :is(.btn-primary, .pill--dark, .dcard__add, .add-btn):hover:not(:disabled),
html body.admin-body :is(.btn-primary, .pos-charge, .kds-bump):hover:not(:disabled),
html body.admin-body [data-admin-root] :is(.btn-primary, .pos-charge, .kds-bump):hover:not(:disabled) {
  background: color-mix(in srgb, var(--sb-ink) 86%, black) !important;
  border-color: color-mix(in srgb, var(--sb-ink) 86%, black) !important;
  color: var(--sb-page) !important;
}
html body.lp :is(.btn-secondary, .filter-pill, .segmented button, .icon-btn),
html body.admin-body :is(.btn-ghost, .filter-pill, .icon-btn, .admin-topbar__link, .admin-jump, .store-toggle) {
  background: var(--sb-surface) !important;
  border-color: var(--sb-border) !important;
  color: var(--sb-ink) !important;
}

/* The desktop menu intro uses the shared pale page surface. Its category
   controls must therefore use the shared dark control ink; phone and tablet
   retain the dark, horizontally scrolling menu bar defined in system.css. */
@media (min-width: 1025px) {
  html body.lp .menu-hero .filter-pill {
    border-color: var(--sb-border) !important;
    background: var(--sb-surface) !important;
    color: var(--sb-ink) !important;
    opacity: 1;
  }

  html body.lp .menu-hero .filter-pill:hover {
    border-color: var(--sb-highlight) !important;
    background: var(--sb-surface-muted) !important;
    color: var(--sb-ink) !important;
  }

  html body.lp .menu-hero .filter-pill[aria-pressed="true"] {
    background: var(--sb-surface-selected) !important;
    border-color: var(--sb-highlight) !important;
    color: var(--sb-ink) !important;
  }
}
html body.lp :is(.btn-secondary, .filter-pill, .segmented button, .icon-btn):hover:not(:disabled),
html body.admin-body :is(.btn-ghost, .filter-pill, .icon-btn, .admin-topbar__link, .admin-jump, .store-toggle):hover:not(:disabled) {
  background: var(--sb-surface-muted) !important;
  border-color: var(--sb-highlight) !important;
}
html body.lp :is(.filter-pill[aria-pressed="true"], .segmented button[aria-pressed="true"]),
html body.admin-body .filter-pill.is-active {
  background: var(--sb-surface-selected) !important;
  border-color: var(--sb-highlight) !important;
  color: var(--sb-ink) !important;
}
html body.lp :is(.btn, .pill, .filter-pill, .segmented button, .icon-btn),
html body.admin-body :is(.btn, .filter-pill, .icon-btn, .admin-topbar__link, .admin-jump, .store-toggle) {
  border-radius: var(--sb-radius-control) !important;
}

/* Cards, forms and overlays use one surface/elevation treatment. */
html body.lp :is(.drink-card, .outlet, .outlet-card, .account-card, .auth-card, .checkout-card, .outlet-radio, .item-modal, .cart-drawer, .order-context-modal),
html body.admin-body :is(.admin-card, .admin-panel, .stat-tile, .product-row, .avail-row, .og-card, .cms-card, .store-status, .admin-tablewrap, .schedule-day, .schedule-summary, .schedule-slot, .pos-product, .pos-cart, .pos-review, .pos-complete, .kds-ticket, .editor-drawer, .admin-command__dialog) {
  background: var(--sb-surface) !important;
  border-color: var(--sb-border) !important;
  border-radius: var(--sb-radius-card) !important;
  box-shadow: var(--sb-shadow-card);
}
html body.lp :is(.field input, .field select, .field textarea, .promo-row input),
html body.admin-body :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .admin-inline-search) {
  background: var(--sb-page) !important;
  border-color: var(--sb-border-strong) !important;
  border-radius: var(--sb-radius-control) !important;
  color: var(--sb-ink) !important;
}
html body.lp :is(.field input, .field select, .field textarea, .promo-row input):focus,
html body.admin-body :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .admin-inline-search):focus {
  border-color: var(--sb-highlight) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-highlight) 25%, transparent) !important;
}
html body.lp :is(.field input, .field textarea)::placeholder,
html body.admin-body :is(input, textarea)::placeholder {
  color: var(--sb-ink-muted) !important;
  opacity: 1 !important;
}
html body.lp :is(.field label, .field-hint, .auth-status, .auth-card__intro, .account-section-intro, .hours-table th),
html body.admin-body :is(.field label, .field-hint, .admin-muted, .kpi__label, .kpi__sub, .admin-topbar__title p, .admin-table th, .integration-secret__status, .integration-guidance) {
  color: var(--sb-ink-muted) !important;
  font-weight: 600;
}
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"] {
  background: var(--sb-disabled-surface) !important;
  border-color: var(--sb-border-strong) !important;
  color: var(--sb-disabled-ink) !important;
  opacity: 1 !important;
}

/* Semantic status colours remain reserved for feedback, never branding. */
html body.lp .status-pill, html body.admin-body .status-pill { font-weight: 700; }
html body.lp .status-pill.ok, html body.admin-body .status-pill.ok { background: var(--sb-status-success-tint) !important; border-color: var(--sb-status-success) !important; color: var(--sb-status-success) !important; }
html body.lp .status-pill.warn, html body.admin-body .status-pill.warn { background: var(--sb-status-warning-tint) !important; border-color: var(--sb-status-warning) !important; color: var(--sb-status-warning) !important; }
html body.lp .status-pill.danger, html body.admin-body .status-pill.danger { background: var(--sb-status-danger-tint) !important; border-color: var(--sb-status-danger) !important; color: var(--sb-status-danger) !important; }

/* Bring the operations workspace into the same café system while preserving its
   information-dense layout. */
html body.admin-body :is(.admin-app, .admin-main, .admin-content) { background: var(--sb-page) !important; color: var(--sb-ink) !important; }
html body.admin-body .admin-side { background: linear-gradient(180deg, var(--sb-ink), color-mix(in srgb, var(--sb-ink) 84%, black)) !important; }
html body.admin-body .admin-side :is(a, button, .admin-nav__item) { color: #fff !important; }
html body.admin-body .admin-side .admin-nav__item:not(.is-active) { color: color-mix(in srgb, #fff 82%, var(--sb-ink)) !important; }
html body.admin-body .admin-topbar { background: color-mix(in srgb, var(--sb-page) 92%, transparent) !important; border-bottom-color: var(--sb-border) !important; }
html body.admin-body .content-intro { background: linear-gradient(135deg, var(--sb-ink), color-mix(in srgb, var(--sb-ink) 84%, black)) !important; border-radius: var(--sb-radius-feature) !important; }
html body.admin-body .admin-table th { background: var(--sb-surface-muted) !important; color: var(--sb-ink) !important; }
html body.admin-body .admin-table tbody tr:hover { background: color-mix(in srgb, var(--sb-surface-muted) 62%, transparent) !important; }

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-highlight) !important;
  outline-offset: 3px;
}

/* Use one readable, sentence-case voice throughout the customer storefront.
   Initialisms such as "RM" retain their authored casing; only CSS-driven
   all-caps treatment is removed. */
html body.lp * { text-transform: none !important; }
html body.lp :is(.ey, .eyebrow, .hero__eyebrow, .hero__note span,
  .hero__note small, .hero__scrolllink, .order-ribbon__intro b,
  .dcard__badge, .dcard__no, .loyalty__stamp small, .loyalty__points small,
  .delivery__status, .lp-foot__cols h4, .lp-foot__bottom) {
  text-transform: none !important;
  letter-spacing: .02em !important;
}

/* Only the step index uses the small label treatment. Live point and currency
   values inherit the same type scale as the surrounding sentence. */
html body.lp .loyalty__copy li {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}
html body.lp .loyalty__copy li span {
  font: inherit;
  letter-spacing: normal;
}
html body.lp .loyalty__copy li > .loyalty__step-number {
  flex: 0 0 28px;
  color: var(--sb-ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em !important;
}

@media (max-width: 640px) {
  html body.lp :is(.menu-hero, .outlets-hero, .account-hero, .checkout-hero) { padding-block: 112px 44px !important; }
  html body.lp :is(.drink-card, .outlet, .account-card, .auth-card, .checkout-card) { border-radius: 14px !important; }

  /* Account and live-tracking forms share the fixed route dock. Their intro
     is deliberately compact so the first submit or recovery action remains
     completely above that dock in the opening viewport. */
  html body.lp .account-hero { padding-block:56px 24px !important; }
  html body.lp:has(.mobile-order-dock) .account-body .auth-card {
    scroll-margin-bottom:calc(96px + env(safe-area-inset-bottom));
  }
}